Question

我想使用Jquery Date选择器选择日期。我从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

Answer 1

我同意你的观点，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（默认样式）

如果您必须显示伊斯兰/ Hijri日历，则必须添加jquery.calendars.islamic.min.js文件并在calendar: $.calendars.instance('islamic')函数中添加calendarsPicker选项。

这是一份工作样本：

＆＃13;

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

＆＃13;

<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">

＆＃13;

附加说明：

如果您需要本地化您的伊斯兰日历，您可以添加jquery.calendars.islamic-ar.js（阿拉伯语本地化）或jquery.calendars.islamic-fa.js（波斯语/波斯语本地化）。

如果您需要自定义datepicker的样式，请查看this page的布局/样式标签，它会显示如何添加其中一个提供的主题（例如{ {1}}）以及它们如何与jQuery UI主题协同工作。

Answer 2

访问Datepicker Widget并转到本地化并查看各种选项

另见official working example

在页面中添加用于本地化的js

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

并在代码段中查看如何初始化语言

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 3

Please visit this page

从“从弹出窗口或内联日历中选择日期”字样附近的下拉列表中选择“阿拉伯语”。如果它提供的开箱即用的功能对您的目标是可行的 - 那么也许我可以给出一些如何安装它的说明。 ^ _ ^如果伊斯兰日期需要更多的调整和复杂的规则 - 那么我的回答将毫无用处。

按此顺序连接页面中的库：

的jQuery
jQuertUI
jquery.ui.datepicker-ar.js

这样做

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

datepicker输入

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

Answer 4

请转到codepen的这个链接。使用此javascript代码。这是一个非常简单和轻量级的伊斯兰日期选择器。 Gregorian Hijri日历转换器的轻量级Datepicker [https：//codepen.io/zulns/pen/adqQjq]

什么是JQuery插件必须为伊斯兰日期选择器日历添加？

4 个答案: