Once the user select a date or change the selection it will fire the change() function. On Selection of the date from the calendar we will display the selected value to the user through a div tag.
The code is here.
While displaying calendar to the user, which day of the week will be shown at left side or in the first column. It can be any day of the week from Sunday to Saturday.
This Options take integer from 0 to 6. Using this we can change our calendar columns staring from left to right.
Default value is 0 : Sundays at left most column
We can show our calendar with Saturday and then Sunday at left column by making firstDay as 6.
How to interlink two Calendars to select start date and end date by user in JQuery UI datepicker
Here are some of the conditions required for selection of dates
Two date pickers showing Start date and end date of any event.
If Start date is selected then end date has to start from or beyond start date only.
If end date is selected then start date has to be before that. DEMO of linked Start date and End Date in two calendars →
Date Picker with range of dates.
One event is of 15 days duration , so if start date is picked up then end date can't be more than 15 days. So end date has to be within next 15 days
Same way if end date is selected first then start date can't be before 15 days.
Here we will use both minDate and maxDate
We have two calendars. Once the End date is selected in second calendar then that will be the maxDate of first calendar. Similarly once the start date is selected from first calendar then that will be the minDate for second calendar showing end date.
Here maxDate and minDate are selected dynamically which changes based on selection of dates by user.
For second date picker the minimum date is variable which is taken from the selection of first date picker.
This function is executed before displaying the date in the calendar. Using this we can add different functionality to our display. This function returns array with three elements for our use
[0] : True of False , to decide the date is selectable by user or not
[1]: a CSS class name to add with specific date , we can link it to above conditions
[2]: A tooltip message to display for the date cell.
We will use all these three on different examples .
Using JavaScript
For all bellow written scripts we will be using function checkDate() , This function receives the date as parameter from the jquery , here is the structure of the function
function checkDate(selectedDate) {
....
}
We will change the code inside the function as per our requirement to return the above array.
To call this function we will use jquery code like this.
Let us start with making some days selectable by user or not.
Show a calendar for which some dates will be disabled. Here is a calendar to show current month or any other month with 14th 19th and 25th of the month are disabled.
DEMO of Date Picker with disabled dates in all months →
Show a calendar for which weekdays ( Saturday and Sundays ) are disabled . For this we will be using JavaScript function getDay , this function returns 0 for Sunday and 1 for Monday etc …
DEMO of Date Picker with disabled weekdays in all months →
Disable calendar dates for selection by user.
Now we will keep some fixed dates for which the calendar cells will be disabled for selection.
This has more practical uses as you can connect this to a database where you can read the dates to populate the array not_available_dates so they can be made available or not based on the script requirement. We are not discussing here how to enter database records or displaying them , you can read them in our PHP section.
DEMO of Date Picker with disabled Calendar Dates in different months →
Resetting user entered data of a date picker
$.datepicker._clearDate('#dt3');
or
$.datepicker._clearDate(this);
or on button click with resetting minDate, maxDate, display area and value
We need to show a calendar with different color of cells based on some condition. Tickets or availability can be sown in green or red color backgrounds where red color shows non availability and user can't select the date.
In addition to managing CSS we can also show tooltip
DEMO Script showing event of the day with tool tip →
Changing size of the Date Picker
.ui-datepicker {
width: 24em; // Change this value
}
Keep date picker open at the time of page load ( Always )
Instead of using input tag as date picker use div
<div id='date_picker'></div>
Setting time by sliders along with Date from calendar
PHP Script to collect date value and store in database
$date_enq=$_POST['date_enq'];
if(strlen($date_enq) >5){
$date = new DateTime($date_enq);
$date_enq=$date->format('Y-m-d');
}else{
//$date_enq=Null;
$date_enq=date("Y-m-d"); // today's date
}
Apply different themes to Date Picker
We can check our date picker by applying different themes. The theme CDN is displayed below the date picker, you can use that in your pages. How to use different themes are explained at JQuery Home.
hi,
can u help me to develop project with the requirement of mine,
in jquery 2nd,4th saturday and all sunday's should be disable using datepicker in asp.net.
pls help me
rickchow
08-07-2016
Jquery date picket looks nice. Where is the source code? Full code that I can run on my page?
Akila
09-09-2017
how to call the script in text box input type
smo1234
27-09-2017
This is explained at the top of the tutorial. Note that this date piker will work with all JQuery support.