Add Date Picker in SharePoint 2016/2013/Online using JavaScript Object Model (jsom)

This SharePoint 2013 tutorial explains, how to add a date picker into a SharePoint 2013/2016/Online site. Date Picker in SharePoint will allow us to select a date from the calendar control. In this example, we will put an input box and whenever a user clicks on the input box, the date picker will appear and the user should be able to select a date from the date picker.

In this example, we will write the client side code using a script editor web part or content editor web part in SharePoint.

Add Date Picker in SharePoint using JavaScript

Open the SharePoint site and open the web part page. Edit the page, then Add a Script Editor web part from the Media and Content Category and place the below code. Now save the page.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<script>
$(function() {
$( "#fromdatepicker" ).datepicker();
});
$(function() {
$("#btnSubmit").click(function() {
var startDate = $("#fromdatepicker").datepicker("getDate");
startDate = startDate.getFullYear()+"-"+(startDate.getMonth()+1)+"-"+startDate.getDate();

alert(startDate);
});
});
</script>

Select a Date: <input type="text" id="fromdatepicker"/>
<input type="button" id="btnSubmit" value="Get Date">

Now when you click on the button, it will display the date in the alert box.

Add DatePicker control in SharePoint 2013 site
Add DatePicker control in SharePoint 2013 site

Add date picker in SharePoint 2013 using JavaScript

This JavaScript SharePoint tutorial, we will discuss how to add a date picker in SharePoint page using SharePoint javascript object model. Here in this post, we will see how the date validation work means like the start date should not be greater than the end date. And also End should not be less than the start date.

Write the below code using the script editor web part on a web part page in SharePoint 2013/2016/Online.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<script>
$(document).ready(function() {

$( "#fromdatepicker" ).datepicker({
onClose: function( selectedDate ) {
$( "#todatepicker" ).datepicker( "option", "minDate", selectedDate );
}
});

$( "#todatepicker" ).datepicker({
onClose: function( selectedDate ) {
$( "#fromdatepicker" ).datepicker( "option", "maxDate", selectedDate );
}
});

});
</script>
From Date: <input type="text" id="fromdatepicker" />
To Date: <input type="text" id="todatepicker" />
<input type=’button’ value=’Export Data to Excel’ onclick="retrieveListItems();"/>

<script language="javascript" type="text/javascript">
function retrieveListItems() {
var startDate = $("#fromdatepicker").datepicker("getDate");
var endDate = $("#todatepicker").datepicker("getDate");
alert(startDate);
alert(endDate);
}
</script>
Add date picker in SharePoint 2013 using JavaScript
Add datepicker in SharePoint 2013 using client object model
Add date picker in SharePoint using JavaScript
Add datepicker in SharePoint 2013 using client object model

You may like following SharePoint jsom tutorials:

I hope this SharePoint tutorial helps to Add Date Picker in SharePoint 2016/2013/Online using JavaScript Object Model (jsom).

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

>