Что должен добавить плагин JQuery для Исламского календаря выбора даты?

Я хочу выбрать дату, используя Jquery Date Picker. Я скачиваю файл с Keith-wood.name. В нем так много js файлов и css файлов. Это меня смущает. Поэтому я установил Jquery, как указано на этой странице. Но это не работает.

Вот мой код:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="js/jquery-3.1.1.js"></script>
    <link href="css/w3.css" rel="stylesheet" />
    <script src="js/jquery.calendars.plus.min.js"></script>
    <script src="js/jquery.calendars.islamic.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="txtHijriDate" runat="server"></asp:TextBox>
        <script>
            $('#txtHijriDate').calendarsPicker(
            {
                monthsToShow: [2, 3], showOtherMonths: true,
                onSelect: function (date) { alert('You picked ' + date[0].formatDate()); }
            });

            $('#pickerButton').click(function () {
                try {
                    var calendar = $.calendars.instance($('#pickerCal').val());
                    $('#defaultPicker').calendarsPicker('option', { calendar: calendar }).
                        calendarsPicker('showMonth', parseInt($('#pickerYear').val(), 10),
                        parseInt($('#pickerMonth').val(), 10));
                }
                catch (e) {
                    alert(e);
                }
            });
        </script>
    </form>
</body>
</html>

Когда я смотрю на консоль.

Выдает ошибку при Cannot read property 'regionalOptions' of undefined jquery.calendars.plus.min.js и

Cannot read property 'baseCalendar' of undefined jquery.calendars.islamic.min.js

Ответы

Ответ 1

Я согласен с вами, docs на keith-wood.name является немного сложным и запутанным.

Если вы посмотрите раздел Использование страницы jQuery Calendars Datepicker, вы увидите, что вам нужно для импорта следующих файлов:

jquery.min.js - библиотека jQuery
jquery.calendars.js
jquery.calendars.plus.js
jquery.plugin.js
jquery.calendars.picker.js
и jquery.calendars.picker.css (стиль по умолчанию)

Если вам нужно показать календарь исламского/хиджри, вам нужно добавить файл jquery.calendars.islamic.min.js и добавить calendar: $.calendars.instance('islamic') в функцию calendarsPicker.

Здесь рабочий пример:

$('#txtHijriDate').calendarsPicker({
  calendar: $.calendars.instance('islamic'),
  monthsToShow: [2, 3],
  showOtherMonths: true,
  onSelect: function (date) {
    alert('You picked ' + date[0].formatDate());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>

<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet"/>

<input type="text" id="txtHijriDate">

Ответ 2

посетите Виджет Datepicker и перейдите к локализации и просмотрите различные опции

Также см. официальный рабочий пример

На странице добавьте этот js, который предназначен для локализации

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>

и в фрагменте см., как инициализировать язык

$(function() {
  $('#adverts_eventDate').datepicker($.extend({}, $.datepicker.regional['ar'], { //initialize language
    showButtonPanel: true,
    dateFormat: 'dd-mm-yy'
  }));
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://codeorigin.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
<input type="text" id="adverts_eventDate" />

Ответ 3

Посетите эту страницу

В раскрывающемся списке рядом с словами "Выберите дату из всплывающего или встроенного календаря" - выберите "Арабский". Если функциональность, предоставляемая вне коробки, подходит для вашей цели - возможно, я могу дать некоторые инструкции по ее установке. ^ _ ^ Если исламские даты требуют больше настроек и сложных правил - тогда мой ответ был бы бесполезным.

соедините там библиотеки на вашей странице в следующем порядке:

JQuery
jQuertUI
jquery.ui.datepicker-ar.js

после этого вы можете использовать арабскую локализацию. Вы вызываете его в том месте, где вы оставили свой

сделать это

$(function() {
    $( "#datepicker" ).datepicker( $.datepicker.regional[ "ar" ] );
 });

datepicker input

<input type="text" id="datepicker">

Ответ 4

Перейдите по этой ссылке codepen. Используйте этот код javascript. Это очень простой и легкий исламский выбор даты. Легкий Datepicker для Gregorian Hijri Calendar Converter [https://codepen.io/zulns/pen/adqQjq]