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>

Answer 1

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ç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ç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();
});