Bind current date to date picker control using jQuery in SharePoint Online/2013/2016

This jQuery tutorial explains how to bind the current date or today’s date to a date picker using jQuery in SharePoint Online Office 365.

Here in this example, I was creating an HTML input form for SharePoint Online site. For that, I was using a date picker control. And my requirement was to bind current date to the date picker using jQuery.

The same jQuery code we can use to add a date picker control and set the default as of today’s date in SharePoint 2013/2016. The code you can add inside a script editor or content editor web part in SharePoint.

You can also learn how to create an HTML form in classic SharePoint sites, in modern SharePoint Online sites, you can not add any script editor web part.

HTML DatePicker jQuery

First, create a “DatePicker” by using the below HTML code:

<input type="date" id="SubmitDate" title="Submitdate"/>

Here in this HTML Code, I have given a date ID attribute as “SubmitDate”.

You can also use the jQuery date picker in SharePoint.

Set Current Date in DatePicker using jQuery

Now we have to bind this date picker to the current date or today’s date using JQuery. The JQuery code is given below-

var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear() + "-" + (month) + "-" + (day);
$('#SubmitDate').val(today);

Here in this JQuery Code, I have taken a Variable name as “now” and assigned current date to the date picker. That “now” variable, I have passed in the variable “day”, “month” and “today” using Query String as “now.getDate()”, “now.getMonth()” and “now.getFullYear()”. So that we can get the date as a UTC Format like (YY-MM-DD).

To set Today’s date, write like below.

$('#SubmitDate').val(today);

The full code to bind current date or today’s date to a date picker using jQuery in SharePoint looks like below:

Select Date: <input type="date" id="SubmtDate" title="Select a date"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
   setCurrentDate()
});

function setCurrentDate()
{
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear() + "-" + (month) + "-" + (day);
$('#SubmitDate').val(today);
}
</script>

Once you run the code, you can see the output looks like below in the SharePoint web part page.

You may like following JavaScript tutorials:

• How to get a SharePoint person or group field using javascript (jsom)
• How to create a list using jsom (JavaScript object model) in SharePoint?
• bootstrap’s JavaScript requires jQuery error in SharePoint Online
• Check if the internet available in your computer using JavaScript
• Show Tooltip in SharePoint using JavaScript
• QR CODE Generator in SharePoint using JavaScript

This SharePoint tutorial, we discussed how to bind the current date or today’s date using JQuery in SharePoint Online or SharePoint 2016/2013.