I wants to pick the date using Jquery Date picker. I download the file from Keith-wood.name. It has so many js files and css files. It makes me confuse. So I set the Jquery as mentioned in that page. But It doesn't work.
Here is my code:
<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> When I look at the console.
It throws error on
Cannot read property 'regionalOptions' of undefined jquery.calendars.plus.min.jsand
Cannot read property 'baseCalendar' of undefined jquery.calendars.islamic.min.js
4 Answers
Answers 1
I agree with you, docs on keith-wood.name is a bit complex and confusing.
If you take a look at the Usage section of jQuery Calendars Datepicker page, you will see that you need to import the following files:
jquery.min.js- the jQuery libraryjquery.calendars.jsjquery.calendars.plus.jsjquery.plugin.jsjquery.calendars.picker.js- and
jquery.calendars.picker.css(default style)
If you have to show an Islamic/Hijri calendar, you have to add the jquery.calendars.islamic.min.js file and add calendar: $.calendars.instance('islamic') option in the calendarsPicker function.
Here a working sample:
$('#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">Additional notes:
If you have to localize your Islamic calendar you can add jquery.calendars.islamic-ar.js (Arabic localisation) or jquery.calendars.islamic-fa.js (Farsi/Persian localisation).
If you need to customize datepicker's style take a look at the Layout/Style tab of this page, it shows how to add one of the provided themes (e.g. redmond.calendars.picker.css) and how they work together with jQuery UI themes.
Answers 2
visit Datepicker Widget and go to localization and see various options
Also see official working example
In page add this js which is for localization
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
and in snippet see how to initialize language
$(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" />Answers 3
From the drop-down list near words 'Select a date from a popup or inline calendar' - chose 'Arabic'. If functionality that it provides out-of box is ok for your goal - then perhaps I could give some instructions how to install it. ^_^ If islamic dates require more tweaks and complex rules - then my answer would be useless.
connect there libraries in your page in this order:
- jQuery
- jQuertUI
- jquery.ui.datepicker-ar.js
after that you can use arabic localization. You invoke it in a place where you left your
do this way
$(function() { $( "#datepicker" ).datepicker( $.datepicker.regional[ "ar" ] ); }); datepicker input
<input type="text" id="datepicker"> Answers 4
Please go to this link of codepen. Use this javascript code. It is very simple and lightweight Islamic date picker. Lightweight Datepicker for Gregorian Hijri Calendar Converter [ https: //codepen.io/zulns/pen/adqQjq ]
0 comments:
Post a Comment