Showing posts with label Culture based jQuery datepicker in MVC4. Show all posts
Showing posts with label Culture based jQuery datepicker in MVC4. Show all posts

Tuesday, September 10, 2013

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 :)