Date Picker to show calendar for selection of dateDate Pickers can be used to select date or a range of date as input to a process.
Date FormatWe can change the format at input text box by dateFormat option
Change functionOnce 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.
firstDayWhile 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 minDateThese options we can use to set the maximum and minimum selectable dates from the calendar.
Today is the maximum date user can select.
Maximum and minimum date is one week after and before ( from today )
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 yearsWe 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 Picker dependant first and second dateHere 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.
BeforeshowdayThis 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
We will use all these three on different examples .
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.
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
Difference in days between two calendar datesUser 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 YearHere is a modification of Calendar to given only option to select Month and Year. No date part is shown to the user.
Application of beforeShowdayWe 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