Хиджра (арабский) средство выбора даты календаря с использованием javascript и MVC

Я работаю над проектом, в котором есть форма, которая требует от пользователя ввода даты с использованием календаря Хиджры (арабского). Для этого я уже создал файлы JavaScript, но они в английском формате.

Я просто хочу на арабском.

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>


javascript datepicker asp.net-mvc arabic hijri
person AhmedNazeh    schedule 26.09.2016    source источник
comment
Вы имеете в виду отображение названия месяца и дня арабскими буквами? Я вижу, что файл hijri-date.js содержит названия месяцев, написанные на латинице (Мухаррам, Сафар и т. д.), возможно, вам придется вручную изменить их на арабские.   -  person Tetsuya Yamamoto    schedule 27.09.2016
comment
ооо, спасибо, чувак, ты потрясающий, это помогло мне решить мою проблему, большое спасибо   -  person AhmedNazeh    schedule 27.09.2016
comment
привет, где я могу получить этот инструмент?   -  person Loai    schedule 30.12.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете написать свою собственную вспомогательную функцию, чтобы установить параметры выбора даты пользовательского интерфейса jQuery и написать названия дней недели, названия месяцев и другие параметры, если хотите. Возможно, кодировка станет проблемой позже, нужно попытаться выяснить.

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']);
});

Итак, замените текст каждого параметра на свой собственный, установите регион, используемый в плагине, и инициализируйте его в селекторе, например

$(function() {
    $(".type-data").datepicker();
});
person Tiramonium    schedule 03.10.2017