Culture based jQuery datepicker in MVC4

Hi , I am going to show you today a very interesting thing :) which i implemented yesterday in my project, where requirement is to show datetime format of whole site to client's culture (means browser dependent culture,which we can have from the browser default language). I create a html helper class for this which took the   CurrentCulture from the Thread.CurrentThread and from there we can easily have the datetime format for our beautiful :) datepicker ok? from this "Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern" .

Now we have to call this html helper's methode which return dateformat for the datepicker like this.

Here one more thing i implemeted is to create a custom select button for the  datepicker,with this
.next(".ui-datepicker-trigger").addClass("Datepicker-Orange"); where "Datepicker-Orange" is the css class which replace the datepicker button style.

$(function () {
        $("#ReleaseDate").datepicker({
            showOn: "button",
            buttonImageOnly: false,
            buttonText: "select",
            changeMonth: true,
            changeYear: false,
            dateFormat: '@Html.ConvertDateFormat()',
            onSelect: function (dateText) {

            }
        }).next(".ui-datepicker-trigger").addClass("Datepicker-Orange");

        $(".ui-datepicker-trigger").mouseover(function () {
            $(this).css('cursor', 'pointer');
        });
    });


Here is the Helper class
using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Web.Routing;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Linq.Expressions;
using System.Threading;

namespace <Somenamespace>
{
    ///<summary>
    /// JQuery UI DatePicker helper.
    ///</summary>
    public static class JQueryUIDatePickerHelper
    {
        /// <summary>
        /// Function Name:ConvertDateFormat
        /// Bishnu Tewary
        /// 09-09-2013
        /// Converts the .net supported date format current culture
        /// format into JQuery Datepicker format.
        /// </summary>
        /// <param name="html">HtmlHelper object.</param>
        /// <returns>Format string that supported in JQuery Datepicker.</returns>
        public static string ConvertDateFormat(this HtmlHelper html)
        {
            return ConvertDateFormat(html,
        Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern);
        }

        /// <summary>
        /// Function Name:ConvertDateFormat
        /// Bishnu Tewary
        /// 09-09-2013
        /// Converts the .net supported date format current culture
        /// format into JQuery Datepicker format.
        /// </summary>
        /// <param name="html">HtmlHelper object.</param>
        /// <param name="format">Date format supported by .NET.</param>
        /// <returns>Format string that supported in JQuery Datepicker.</returns>
        public static string ConvertDateFormat(this HtmlHelper html, string format)
        {
            /*
             *  Date used in this comment : 9th - Sep - 2013 (Monday)
             *
             *  .NET    JQueryUI        Output      Comment
             *  --------------------------------------------------------------
             *  d       d               9           day of month(No leading zero)
             *  dd      dd              09          day of month(two digit)
             *  ddd     D               Mon         day short name
             *  dddd    DD              Monday    day long name
             *  M       m               9          month of year(No leading zero)
             *  MM      mm              09          month of year(two digit)
             *  MMM     M               Sep         month name short
             *  MMMM    MM              September    month name long.
             *  yy      y               13          Year(two digit)
             *  yyyy    yy              2013        Year(four digit)             *
             */

            string currentFormat = format;

            // Convert the date
            currentFormat = currentFormat.Replace("dddd", "DD");
            currentFormat = currentFormat.Replace("ddd", "D");

            // Convert month
            if (currentFormat.Contains("MMMM"))
            {
                currentFormat = currentFormat.Replace("MMMM", "MM");
            }
            else if (currentFormat.Contains("MMM"))
            {
                currentFormat = currentFormat.Replace("MMM", "M");
            }
            else if (currentFormat.Contains("MM"))
            {
                currentFormat = currentFormat.Replace("MM", "mm");
            }
            else
            {
                currentFormat = currentFormat.Replace("M", "m");
            }

            // Convert year
            currentFormat = currentFormat.Contains("yyyy") ?
        currentFormat.Replace("yyyy", "yy") : currentFormat.Replace("yy", "y");

            return currentFormat;
        }
    }
}

NOTE : you need to add
<globalization culture="auto" uiCulture="auto" /> in web.config
Cheers :)

Related Posts: