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'
});
});

JQuery UI date picker Calendar formats & collecting user selected value with minimum maximum range


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



DEMO of Date Picker with date format

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>
DEMO of change event of Date Picker

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.

DEMO of changing first day of the week

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.
DEMO of Maximum and minimum selection of dates

For Maximum selection of dates we can have different options.

DEMO of maxDate with options for selection of dates

For Minimum selection of dates we can have different options.

DEMO of minDate with options for selection of dates

Default Date and Set a Date by setDate

We can set the default date for the calendar by using the value option of the text box
<input type="text" id="date_picker"
  class="form-control" placeholder="Calendar" value='14-05-2018'>
By using JQuery we can use defaultDate option to set a default for the calendar. Similarly we can use setDate to fix the date of any calendar.
$( "#date_picker1" ).datepicker({
dateFormat: 'dd-mm-yy',
defaultDate:"14-05-2018"
})
To fix a date by setDate
$("#date_picker2").datepicker("setDate",var_setDate );
DEMO with defaultDate and setDate

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"
})
DEMO of Year Selection with a range

Date Picker dependant first and second date


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.

One event is of maximum two week duration, create two calendars where end date and start date can be selected.
DEMO of Event with fixed range with different Start and End dates
DEMO of Event with fixed range with different Start and End dates ( Using single Calendar )

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.
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
////Reset button on click event///
$('#b1').click(function(){
$('#date_picker1').val("");	
$('#date_picker1').datepicker('option', {minDate: null, maxDate: null});
startDate=null;
$("#msg").html("");
})

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.
Getting the difference in days between two calendar dates

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.
Select Month & Year Only from Calendar

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 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

DEMO : Time in Hour : Minute and Second format along with date

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

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.

DEMO of Date Picker with different Themes selected by user

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    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
    smo1234

    27-09-2017

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

    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer