Hijri (Arabic) calendar date picker using javascript and MVC

Question

I am working on a project that has a form which requires the user to input a date using the Hijri (Arabic) calendar. I have already created JavaScript files to do it, but it's in English format.

I just want it in Arabic.

var cal1 = new Calendar(),
    cal2 = new Calendar(true, 0, false, true),
    date1 = document.getElementById('date-1'),
    date2 = document.getElementById('date-2'),
    cal1Mode = cal1.isHijriMode(),
    cal2Mode = cal2.isHijriMode();

document.getElementById('cal-1').appendChild(cal1.getElement());
document.getElementById('cal-2').appendChild(cal2.getElement());
cal1.show();
cal2.show();
setDateFields();

cal1.callback = function() {
  if (cal1Mode !== cal1.isHijriMode()) {
    cal2.disableCallback(true);
    cal2.changeDateMode();
    cal2.disableCallback(false);
    cal1Mode = cal1.isHijriMode();
    cal2Mode = cal2.isHijriMode();
  }
  else
    cal2.setTime(cal1.getTime());
  setDateFields();
};

cal2.callback = function() {
  if (cal2Mode !== cal2.isHijriMode()) {
    cal1.disableCallback(true);
    cal1.changeDateMode();
    cal1.disableCallback(false);
    cal1Mode = cal1.isHijriMode();
    cal2Mode = cal2.isHijriMode();
  }
  else
    cal1.setTime(cal2.getTime());
  setDateFields();
};

function setDateFields() {
  date1.value = cal1.getDate().getDateString();
  date2.value = cal2.getDate().getDateString();
}

function showCal1() {
  if (cal1.isHidden()) cal1.show();
  else cal1.hide();
}

function showCal2() {
  if (cal2.isHidden()) cal2.show();
  else cal2.hide();
}

#cal-1, #cal-2 {
  margin-left: 12px;
  margin-top: 10px;
}
.icon-button {
  width: 30px;
}
input {
  width: 243px;
  margin-bottom: 8px;
}

<link href="https://ZulNs.github.io/libs/calendar.css" rel="stylesheet"/>
<script src="https://ZulNs.github.io/libs/calendar.js"></script>
<script src="https://ZulNs.github.io/libs/hijri-date.js"></script>
<div id="cal-1">
 <input id="date-1" type="text" />
 <button class="icon-button" onclick="showCal1();">&#x25a6;</button>
</div>
<div id="cal-2">
 <input id="date-2" type="text" />
 <button class="icon-button" onclick="showCal2();">&#x25a6;</button>
</div>

Are you mean displaying month name and day name in Arabic letters? I see the `hijri-date.js` file contains month names written as Latin (Muharram, Safar, etc.), you may need to change them to Arabic manually. — Tetsuya Yamamoto, Sep 27 '16 at 01:39
oooh, thank you man You're Awsome it's Help Me , to Solve My Problem , thank you very much — AhmedNazeh, Sep 27 '16 at 03:30

score 0 · Answer 1 · answered Oct 03 '17 at 17:07

You could write your own helper function to set the jQuery UI datepicker parameters and write the week day names, month names and other options if you'd like. Maybe encoding will be an issue later, need to try to find out.

jQuery(function ($) {
    $.datepicker.regional['pt-BR'] = {
        closeText: 'Fechar',
        prevText: '',
        nextText: '',
        currentText: 'Hoje',
        monthNames: ['Janeiro', 'Fevereiro', 'Mar&ccedil;o', 'Abril', 'Maio', 'Junho',
            'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
        monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
            'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
        dayNames: ['Domingo', 'Segunda-feira', 'Ter&ccedil;a-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sabado'],
        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
        dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        firstDay: 0,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: '',
        changeMonth: true,
        changeYear: true
    };
    $.datepicker.setDefaults($.datepicker.regional['pt-BR']);
});

So, replace each parameter text for your own, set the region used in the plugin and initialize it in a selector, like

$(function() {
    $(".type-data").datepicker();
});

Hijri (Arabic) calendar date picker using javascript and MVC

1 Answers1