什麼是JQuery插件必須添加爲伊斯蘭棗皮卡蘭德？

我想用Jquery Date選取器選擇日期。我從Keith-wood.name下載該文件。它有很多js文件和css文件。這讓我感到困惑。所以我設置了該頁面中提到的Jquery。但它不起作用。什麼是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

來源

2017-04-12 Liam neesan

這是因爲您尚未加載原始插件：'jquery.calendars.js'。 – Terry

http://jqueryui.com/datepicker/#localization閱讀此 –

@AlfinPaul如何更改jquery-ui的月份和年份 –

我同意你的看法，文檔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文件，並在calendarsPicker功能添加calendar: $.calendars.instance('islamic')選項。

這裏工作示例：

$('#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">

其他注意事項：

如果你有本地化的伊斯蘭曆法，您可以添加jquery.calendars.islamic-ar.js（阿拉伯語本地化）或jquery.calendars.islamic-fa.js（波斯語/波斯語本地化）。

如果您需要自定義日期選擇器的風格來看看的this page的佈局/樣式標籤，它顯示瞭如何添加所提供的主題（例如redmond.calendars.picker.css），以及他們如何使用jQuery UI主題一起工作之一。

來源

2017-04-15 15:58:11 VincenzoC

Please visit this page

從附近的話 '選擇從彈出或在線日曆日期' 下拉列表 - 選擇了「阿拉伯'。如果它提供的開箱即用的功能對於您的目標來說是可以的 - 那麼也許我可以給出一些說明如何安裝它。^_ ^如果伊斯蘭教的日期需要更多的調整和複雜的規則 - 那麼我的回答將是無用的。

連接有庫在你的頁面順序：

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

後，您可以使用阿拉伯語的本地化。你在你離開的地方一個地方調用它，你

做這樣

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

日期選擇器輸入

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

來源

2017-04-12 09:33:56

您的鏈接不工作 –

我檢查您的代碼。它的工作，但我選擇日期後，它會自動轉換成英文calander。在我的情況下，它應該只顯示阿拉伯文calander –

訪問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>

，並在摘要中看到如何在初始化語言

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

來源

2017-04-15 11:33:15

請轉到codepen的此鏈接。使用此JavaScript代碼。這是非常簡單和輕巧的伊斯蘭日期選擇器。 Gregorian Hijri Calendar Converter的輕量級日期選擇器[https：//codepen.io/zulns/pen/adqQjq]

來源

2017-04-21 19:31:01

什麼是JQuery插件必須添加爲伊斯蘭棗皮卡蘭德？

回答

相關問題