Date Picker to show calendar for selection of date

Date Pickers can be used to select date or a range of date as input to a process.
<input type="text" id="date_picker"  placeholder="Calendar">
$(function() {
$( "#date_picker" ).datepicker({
  dateFormat: 'dd-mm-yy'
});
});

Date Format

We can change the format at input text box by dateFormat option
dateFormat: 'dd-mm-yy' // 15-12-2016
dateFormat: 'd-mm-yy' // 5-12-2016
dateFormat: 'dd-m-yy' // 05-2-2016
dateFormat: 'dd-mm-y' // 05-02-16
dateFormat: 'dd-M-yy' // 05-Sep-2016
dateFormat: 'dd-MM-yy' // 05-January-2016
dateFormat: 'dateFormat': "'On' d 'Day of ' MM ', Year : ' yy"
 // On 24 Day of  September , Year :  2016



Change function

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.

HTML

Date:  <input type="text" id="date_picker1" size=9><div id=date_selected></div>

JQuery

<script>
$(document).ready(function() {
///////
$( "#date_picker1" ).datepicker({
dateFormat: 'dd-mm-yy'
})
///////
$('#date_picker1').change(function() {
//startDate = $(this).datepicker('getDate');
startDate = $('#date_picker1').val();
$('#date_selected').text(startDate);
})
////////////////
})
</script>

firstDay

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.

maxDate and minDate

These options we can use to set the maximum and minimum selectable dates from the calendar.

Today is the maximum date user can select.
$(function() {
    $( "#date_picker" ).datepicker({
dateFormat: 'mm-dd-yy',
maxDate:'0'
});
});
Maximum and minimum date is one week after and before ( from today )
$(function() {
    $( "#date_picker" ).datepicker({
dateFormat: 'dd-mm-yy',
maxDate:'+1w',
minDate: '-1w'
});
});
Let us try with maximum selected date one week from today and minimum selected date one week before today. For Maximum selection of dates we can have different options. For Minimum selection of dates we can have different options.

With Year dropdown and Range of years

We can display a dropdown for users to select the year, same time we can set the range of the year to be shown inside the dropdown.
$( "#date_picker1" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
//yearRange: "-15:+0" // Previous 15 years 
yearRange: "1990:2016"
})

Date Picker dependant first and second date

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.

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.

One event is of maximum two week duration, create two calendars where end date and start date can be selected.

Beforeshowday

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.
$(function() {
    $( "#date_picker" ).datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay:checkDate
});
});
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. 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

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.

Resetting user entered data of a date picker

$.datepicker._clearDate('#dt3');
or
$.datepicker._clearDate(this);

Difference in days between two calendar dates

User can select two dates from two calendars and the script will find out the difference in number of days between them.

How to select only Month and Year

Here is a modification of Calendar to given only option to select Month and Year. No date part is shown to the user.

Application of beforeShowday

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

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>

Apply different themes to Date Picker

calendar with different themes

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.

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Visitors Rating
Your Rating


Google+
jagan

04-03-2016

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
subhendu

27-09-2017

This is explained at the top of the tutorial. Note that this date piker will work with all JQuery support.

Post Comment This is for short comments only. Use the forum for more discussions.




Subscribe to our mailing list

* indicates required
Subscribe to plus2net



Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer