Date Formats supported by jQuery DatePicker

Home » jQuery DatePicker » Date Formats supported by jQuery DatePicker

Date Formats supported by jQuery DatePicker

Posted by 20Fingers2Brains on Tags: jQuery DatePicker

In this article we will see different formats supported by jQuery DatePicker.
In the earlier examples we have seen how to render the datepicker on click of textbox and on click of button.
jQuery DatePicker supports multiple dateformats. We will see how to change or apply different date formats.
We are going to use this datepicker in MVC3 Razor project.

Following are the steps :

ViewModel :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace jQueryDatePicker.Models
{
    public class Register
    {
        public DateTime DOB { get; set; }
    }
}

We have created a ViewModel and defined DOB property which is of type DateTime. We will bind this property to the view to render control for this property.

View :

@model jQueryDatePicker.Models.Register
@{
    Layout = "../Shared/_Layout.cshtml";
}


@Html.EditorFor(Model => Model.DOB)

<p>Format options:<br />
 <select id="format">
  <option value="mm/dd/yy">Default - mm/dd/yy</option>
  <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
  <option value="d M, y">Short - d M, y</option>
  <option value="d MM, y">Medium - d MM, y</option>
  <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
  <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
 </select>
</p>
<script type="text/javascript">

    $(document).ready(function () {
        $("#DOB").datepicker();
        $("#format").change(function () {
            $("#DOB").datepicker("option", "dateFormat", $(this).val());
        });
    });
</script>

In the View, we have created a dropdown. We have populated dropdown with different date formats supported by jQuery DatePicker. On select of dropdown, we are applying the selected date format to the DatePicker.

Layout :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.widget.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
</head>

<body>
    @RenderBody()
</body>
</html>

Demo :

Select a date on clicking textbox. Then change the formats from dropdown to see date in different formats.

On selecting date formats from the dropdown, we are applying the selected format to the datepicker.

By this way we can apply date formats to datepicker.