Menu
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
956
JavaScript Code: $( function() { var from = $( "#fromDate" ) . datepicker({ dateFormat: "yy-mm-dd", changeMonth: true }) . on( "change", function() { to. datepicker( "option", "minDate", getDate( this ) ); }), to = $( "#toDate" ).
If the Controls task pane is not visible, click More Controls on the Insert menu, or press ALT+I, C. Under Insert controls, click Date Picker. In the Date Picker Binding dialog box, select the field in which you want to store the date picker data, and then click OK.
In the Data type Format dialog box, do one of the following: To format the control to show the date only, select the display style that you want in the Display the date like this list. To format the control to show the time only, select the display style that you want in the Display the time like this list.
By default, the date format of the jQuery UI Datepicker is the US format mm/dd/yy, but we can set it to a custom display format, eg: for European dates dd-mm-yyyy and so on. The solution is to use the date picker dateFormat option.
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.
56
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
