Hijri (Arabic) date picker calendar using javascript and MVC

Question

I am working on a project that has a form that requires the user to enter a date using the Hijri calendar (Arabic). I have already created JavaScript files for this, but it is 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.imtqy.com/libs/calendar.css" rel="stylesheet"/>
<script src="https://ZulNs.imtqy.com/libs/calendar.js"></script>
<script src="https://ZulNs.imtqy.com/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>

Run codeHide result

Answer 1

You can write your own helper function to set jQuery UI datpicker options and write the names of the days of the week, the names of the months, and other parameters if you want. Maybe coding will be a problem later, 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']);
});

, , , , ,

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