Date Picker With Validations

Table Of Contents

Introduction
Objective
Process

Introduction

With the requirement of Custom Forms in SharePoint comes the need for custom fields to achieve many functionalities which SharePoint provides as OOTB features.

One of them is providing Date Picker control to the input field.

We can provide an input text field for the user to enter dates manually, but this practice is wrong and not user or developer friendly.

If we go with this way, then we will have to do so many validations on the field so that the user doesn’t enter the date in the wrong format or simply enter anything in the field and save the details.

To overcome this, we turn towards the jQuery or Bootstrap date picker control.

These JavaScript libraries help both the user (ease in using the Site) and the Developer (validations and Date Format) to maintain proper Date Fields and UI.

In the following article, I’ll explain how we can use the Date Picker control in the custom form and set validations on it.

Objective

To use jQuery date picker control on SharePoint custom form with validations.

Process

Create a column with ‘Date and Time’ type in SharePoint List.

Fig - Date and Time type Column

Include the following JavaScript references in your HTML file -
1. <link href="..SiteAssets/datepicker.css" rel="stylesheet" type="text/css">
2. <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" type="text/css">
3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
4. <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" type="text/javascript"></script>
5. <script src="../SiteAssets/datepicker-1.10.js" type="text/javascript"></script>
Fig - JavaScript references for Date Picker Control

Create div elements for Date Picker field -
1. <input type="text" id="_startDatePicker" readonly>
2. <input type="text" id="_endDatePicker" readonly>
Fig - Field element on which we will initialize date picker control

Following is the view of the input fields,

Fig - Input fields for Date Picker

We have put ‘readonly’ attribute on input tag so that User will not be able to type anything in the input field.
Now, we move on to the JavaScript code.
We will initialize the Date Picker on the page load so that when we click on the input field, Calendar control will show up to select the date.
1. $('#_startDatePicker').datepicker();
2. $('#_endDatePicker').datepicker();
Fig - Initializing input field with date picker control

After initialization is done, when we click on the input field, we will see the Calendar control box.

Fig - Date Picker control on the Input field

Select on any date and that date will be displayed in the input field.

Fig - Date is showing in the input field after selection

To set validation on Date Picker control, we will use ‘moment.min.js’ library which provides many functionalities to date picker.

Following is the code snippet that we need to add to the date picker initialization code so that Date Picker dates before today’s date are disabled.
1. $('#_startDatePicker').datepicker({minDate: 0});
Fig - Date earlier than today’s date is disabled in the date picker

Similarly, we can set maximum date allowed in date picker.
1. $('#_startDatePicker').datepicker({minDate: 0, maxDate: '1y'});
‘minDate’ parameter is to set the initial date for date picker and ‘maxDate’ parameter is to set maximum date selection allowed in date picker.

Fig - Date past than 1 year from today are disabled

In ‘maxDate’ parameter, we have passed ‘1y’ value for 1 Year difference. Similarly, we can use ‘m’ for month and ‘d’ for days. If we want to pass more than 1 parameter in maxDate, use ‘+’ such as ‘+1y+6m’, this will allow only the next 18 months d
Now we will get the difference between the two dates.
The below code will showcase how we can get the difference between two dates on date picker selection and bind the value to the third display field.
1. $('#_startDatePicker').datepicker({ minDate: 0,
2. maxDate: '+1y',
3. onSelect: function(datestr){
4. startdate = $(this).datepicker('getDate');
5. }});
7. $('#_endDatePicker').datepicker({ minDate: 0,
8. maxDate: '1y',
9. onSelect: function(datestr){
10. enddate = $(this).datepicker('getDate');
11. diff = (enddate-startdate)/(1000*24*60*60);
12. $('#_duration').val(diff)
13. }});
We are storing the value of dates on ‘onSelect’ event and then getting the difference of both dates.
Remember, the difference between two dates always returns the value in milliseconds, so we need to convert it into days. To do that, we divide the value by (1000*24*60*60) to convert it into the number of days.

Fig - showing date difference on date selection

Below is the most important kind of parameter of date picker ‘beforeShowDay - $.datepicker.noWeekends’ which disables the weekends on date picker.
1. $('#_startDatePicker').datepicker({
2. minDate: 0,
3. maxDate: '+1y',
4. beforeShowDay: $.datepicker.noWeekends,
5. onSelect: function(datestr){
6. startdate = $(this).datepicker('getDate');
7. }});
This resolves the most irritating part of date validation, to ensure the user does not enter the weekend date in date picker.

Fig - Weekends are disabled in a date picker

Below is the code snippet to save date picker data in a list.
1. function SaveDate() {
2. var sDate = startdate.toLocaleDateString();
3. var eDate = enddate.toLocaleDateString();
4. $.ajax({
5. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('"+listname+"')/items",
6. type: "POST",
7. data:JSON.stringify({
8. __metadata:{
9. type: "SP.Data.DateDetailsListItem",
10. },
11. StartDate: sDate,
12. EndDate: eDate,
13. Duration: diff
14. }),
15. headers:{
16. "accept": "application/json;odata=verbose",
17. },
18. success: function(data){
19. },
20. error: function(error){
21. alert(JSON.stringify(error));
22. }
23. });
24. }
Note
Date picker returns date in the format ' Tue Aug 25, 2009 00 -00 -00 GMT+0530 (IST)’ which SharePoint will understand. But as a User, doing validation on these formats is a little tricky.

So we used, ‘Date.toLocaleDateString()’ to get the date in the regional format.