28 Working With DateTime Data Type and JQuery UI Datepicker

Documentation about DateTime Data Type

DateTime Date Type

Parsing Strings to Dates

Standard Date and Time Format Strings

Choosing between DateTime DateTimeOffset TimeSpan

Using JQuery UI Datepicker

Note: JQuery UI and JQuery are different things. The JQuery UI has many plugins such as datepicker, dialog, tooltip, etc.

1. Install Jquery.UI.Combined from Nuget Package Manager

2. Add the script and style bundles to /App_Start/BundleConfig.cs

3. Add the bundles to the /Views/Shared/_layout.cshtml file

4. Using JQuey Datepicker plugin JQuery datepicker UI plugin is a uniform way to enter date and time across browsers. First you need to comment any annotation related to date and time in your model definitions.

//[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
[Display(Name = "Creation Date")]
public DateTime CreationDate { get; set; }

Example: /Views/Department/Create.cshtml and Edit.cshtml

5. Add the script to the view file by adding the following script in the script section in the view file:

@section Scripts {
    ...
    <script type="text/javascript">
        $(document).ready(function () {
            $('input[type=datetime]').datepicker();
        });
    </script>
}

Note on date format: The standard date format is The RFC 3339/ISO 8601 YYYY-MM-DD. Other formats may work or not depends on the browser.

datepicker plugin has many options such as minimum date, max date, date range (start - end)

Check documentation of datepicker

Datepicker Doc

Datepicker Options

6. To test this feature, go to /Department/Create or /Department/Edit