Date Time Picker in ASP.NET Core using Jquery Plugin

• Download source code from GITHUB
• Download source code from BitBucket

Introduction

This tip explains how to add DateTime picker in ASP.NET Core MVC application using JQuery plug in.

There will be a situation where you require adding Date Picker, Date Time Picker in your application. Although you can use HTML5 controls for Date and Date Time Picker, it doesn’t look good on the page. So I will show you how to use JQuery Date Time picker plug in ASP.NET Core MVC application.

First, we will add HTML5 controls of type Date and DateTime and then later move on to adding DateTime picker using JQuery plug in ASP.NET MVC application which is simple, easy to use and looks good compared to the already existing HTML5 control.

Prerequisites

Install Visual Studio 2015 update 3 using anyone of the following link to work with .NET Core applications.

• Download Visual Studio 2015 Update 3 - Web Installer

(Or)

• Download Visual Studio 2015 Update 3 - ISO

Step 1: Create ASP.NET Core Web Application

Open Visual Studio and create a new project, select “.NET Framework 4.6.1” version and “ASP.NET Core Web application” from template. Give it a name of your choice and click on OK.

Then select “Web Application” from ASP.NET Core templates and click OK to create the project.

The below image is the project structure that will be created.

Step 2: Create New Action Method in Controller

Open “Home“ controller and create new method and name it as “DateTime_Picker_Demo”.

Then create an MVC view by selecting “MVC View” template.

Add the following code to include the layout page for the created view:

@{
    ViewBag.Title = "DateTime Picker Demo";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Now let’s add built-in HTML5 Date control in the view and check the output:

<h2>Date Time Picker Demo</h2> 

<div class="container"> 
    <div class="row">
        <div>
            @Html.Label("HTML Date control", null, new { @class = "control-label col-xs-3" })
            <div class="col-xs-3">
                <input type="date" />
            </div>
        </div>
    </div>
</div>

Please find the below image for reference:

Press F5 and see the output by changing the URL to the new action method created (eg:localhost:XXXXX/Home/DateTime_Picker_Demo)

Here in the above example, we have the option of selecting only Date, but not both Date and Time. So let’s add Date Time HTML5 control to the view and check the output.

Add the following code in the view inside the div container

<br />
    <div class="row">
        <div>
            @Html.Label("HTML DateTime control", null, 
            new { @class = "control-label col-xs-3" })
            <div class="col-xs-3">
                <input type="datetime-local" />
            </div>
        </div>
    </div>

Please find the below image:

Press F5 and check the output.

The user can select both Date and Time from the control, but as discussed in the introduction, HTML5 controls for Date and Date Time Picker doesn’t really look good on the page. So our next task is to add Date Time picker using JQuery plug in which is simple, easy to use and looks good compared to the already existing HTML5 control.

Step 3: Let’s Add JQuery Date Time Picker plug in

Go to your Project solution and right click on “Bower” from “Dependencies” folder and select Manage Bower Packages from the options.

Then browse and search for “datetimepicker” in the search box and install the JQuery plug in as shown in the below image:

Once you install the package, then you can see the JQuery DateTime Picker added under Bower and also the files under wwwroot ->lib folder as shown in the below image:

Next step is to reference the added Date Time Picker JS and CSS files in the view page. Drag the files into the view and please note that the order of files being referenced should be followed as shown in the image.

Now let’s see the code in the view, please add the following:

<div class="container">
    <div class="row">
       @Html.Label("DateTime using Jquery plug in",null, new { @class = "control-label col-sm-3" })
               <div class="col-sm-3"> 
                @Html.TextBox("datetimepicker")
               </div>
     </div>  
</div> 

<div class="row">
    <input type="submit" class="btn-primary" value="Submit"/>
    <input type="button" class="btn-danger" value="Cancel"/>
</div>

Now add the script in the view to refer to the date time picker:

<script type="text/javascript">  

   jQuery('#datetimepicker').datetimepicker();  

</script>

Press F5 and click on the textbox to see the output as shown in the below image:

There are several properties in the datetimepicker() method which you can use as per your requirement. I will show you some sample properties.

We can set the current date and time for the JQuery plug in when the page is loaded.

Example 1

//get today’s date using Date() method

var todaysdate = new Date();

    jQuery('#datetimepicker').datetimepicker({

        dayOfWeekStart: 1,

        lang: 'en',        

        startDate: todaysdate.getDate().toString(),

        startTime: todaysdate.getTime().toString()

    });

    jQuery('#datetimepicker').datetimepicker({ value: todaysdate.getDate().toString(), step: 10 });

Example 2

You set some dates as disabled by using “disabledDates” property.

disabledDates:['2016/01/11','2016/11/12','2016/11/27'],

You can work with multiple properties provided by using this JQuery Date Time picker plug in as per your requirement.

Hope this will be helpful. :). Feel free to leave your comments below.