I want 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
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.jsjquery.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.
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" />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:
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">