Convert .NET DateTimeFormatInfo to Javascript jQuery formatDate?

Question

I hava a jQuery UI datepicker which I intend to use with a textbox in ASP.NET MVC. The date-display in the textbox is localized via CultureInfo and of course should be recognized by jquery to select the correct date in the datepicker:

<%= Html.TextBox("Date", Model.Date.ToString("d", currentCultureInfo),
    new { @class = "datepicker" })%>

What I am trying to do now is to initialize the datepicker with a dateformat like

string jsCode = @"$("".datepicker"").datepicker({
    dateFormat: '" + currentCultureInfo.DateTimeFormat.ShortDatePattern + @"',
});";

The Problem is that the format of the format string of DateTimeFormatInfo (see MSDN Link) is completely different to the format string in jQuery (jQuery formatDate).

https://msdn.microsoft.com/en-us/library/system.globalization.datetimeformatinfo.aspx

Sample (German date format like 16.07.2009):

.NET: 'dd.MM.yyyy' should be converted to 'dd.mm.yy' in jQuery/Javascript

Is there a method or a library that does the needed transformation between the two formats?

mattanja · Accepted Answer · 2009-08-11 11:38:44Z

If only ShortDatePattern must be converted, the following code provides what I need:

public class wxDateTimeConvert
{
    /// <summary>
    /// Gets the javascript short date pattern.
    /// </summary>
    /// <param name="dateTimeFormat">The date time format.</param>
    /// <returns></returns>
    public static string GetJavascriptShortDatePattern(DateTimeFormatInfo dateTimeFormat)
    {
        return dateTimeFormat.ShortDatePattern
            .Replace("M", "m")
            .Replace("yy", "y");
    }
}

Including Javascript in page:

    /// <summary>
    /// Inserts the localized datepicker jquery code
    /// </summary>
    private void InsertLocalizedDatepickerScript()
    {

        string dateformat = wxDateTimeConvert.GetJavascriptShortDatePattern(Thread.CurrentThread.CurrentUICulture.DateTimeFormat);
        String js = @"$(document).ready(function() {
$("".datepicker"").datepicker({
    changeYear: true,
    dateFormat: '" + dateformat + @"',
    maxDate: new Date()
  });
});";
        this.Page.Header.Controls.Add(
            new LiteralControl("<script type=\"text/javascript\">" + js + "</script>")
        );
    }

However, this does not handle month or day names, time formatting or other special cases.

Dan · Accepted Answer · 2009-08-07 13:01:51Z

I've just run into exactly the same problem and came up with the code below. It's not perfect but should cover most cultures and fail gracefully. It's probably also not the shortest version you could come up with!

///========================================================================
///  Method : ConvertDateFormat
/// 
/// <summary>
///   Takes a culture and returns matching C# and jQuery date format
///   strings. If possible the C# string will be the ShortDatePattern for
///   the supplied culture.
/// </summary>
///========================================================================
private static void GetDateFormats(CultureInfo xiCulture, out string xoCSharpFormat, out string xoJQueryFormat)
{
  //=======================================================================
  // Start by assigning formats that are hopefully unambiguous in case we
  // can't do better.
  //=======================================================================
  xoCSharpFormat = "yyyy-MM-dd";
  xoJQueryFormat = "yy-mm-dd";

  if (xiCulture.IsNeutralCulture)
  {
    try
    {
      xiCulture = CultureInfo.CreateSpecificCulture(xiCulture.Name);
    }
    catch
    {
      //===================================================================
      // Some cultures are neutral and don't have specific cultures.
      // There's not much we can do here.
      //===================================================================
      return;
    }
  }

  string lCSharpFormat = xiCulture.DateTimeFormat.ShortDatePattern;

  //=======================================================================
  // Handle:
  //  C#     jQuery  Meaning
  //  d      d       Day of month (no leading 0)
  //  dd     dd      Day of month (leading 0)
  //  M      m       Month of year (no leading 0)
  //  MM     mm      Month of year (leading 0)
  //  yy     y       Two digit year
  //  yyyy   yy      Not an exact match but good enough:
  //                 C# means: The year in four or five digits (depending on
  //                 the calendar used), including the century. Pads with
  //                 leading zeros to get four digits. Thai Buddhist and
  //                 Korean calendars have five-digit years. Users
  //                 selecting the "yyyy" pattern see all five digits
  //                 without leading zeros for calendars that have five
  //                 digits. Exception: the Japanese and Taiwan calendars
  //                 always behave as if "yy" is selected.
  //                 jQuery means: four digit year
  //
  //  Copy '.', '-', ' ', '/' verbatim
  //  Bail out if we find anything else and return standard date format for
  //  both.
  //=======================================================================
  StringBuilder lJQueryFormat = new StringBuilder();
  bool lError = false;
  for (int ii = 0; ii < lCSharpFormat.Length; ++ii)
  {
    Char lCurrentChar = lCSharpFormat[ii];

    switch (lCurrentChar)
    {
      case 'd':
        //=================================================================
        // d or dd is OK, ddd is not
        //=================================================================
        if (ii < (lCSharpFormat.Length - 1) &&
          lCSharpFormat[ii+1] == 'd')
        {
          if (ii < (lCSharpFormat.Length - 2) &&
          lCSharpFormat[ii+2] == 'd')
          {
            //=============================================================
            // ddd
            //=============================================================
            lError = true;
          }
          else
          {
            //=============================================================
            // dd
            //=============================================================
            lJQueryFormat.Append("dd");
            ii++;
          }
        }
        else
        {
          //===============================================================
          // d
          //===============================================================
          lJQueryFormat.Append('d');
        }
        break;
      case 'M':
        //=================================================================
        // M or MM is OK, MMM is not
        //=================================================================
        if (ii < (lCSharpFormat.Length - 1) &&
          lCSharpFormat[ii + 1] == 'M')
        {
          if (ii < (lCSharpFormat.Length - 2) &&
          lCSharpFormat[ii + 2] == 'M')
          {
            //=============================================================
            // MMM
            //=============================================================
            lError = true;
          }
          else
          {
            //=============================================================
            // MM
            //=============================================================
            lJQueryFormat.Append("mm");
            ii++;
          }
        }
        else
        {
          //===============================================================
          // M
          //===============================================================
          lJQueryFormat.Append('m');
        }
        break;
      case 'y':
        //=================================================================
        // yy or yyyy is OK, y, yyy, or yyyyy is not
        //=================================================================
        if (ii < (lCSharpFormat.Length - 1) &&
          lCSharpFormat[ii + 1] == 'y')
        {
          if (ii < (lCSharpFormat.Length - 2) &&
            lCSharpFormat[ii + 2] == 'y')
          {
            if (ii < (lCSharpFormat.Length - 3) &&
              lCSharpFormat[ii + 3] == 'y')
            {
              if (ii < (lCSharpFormat.Length - 4) &&
                lCSharpFormat[ii + 4] == 'y')
              {
                //=========================================================
                // yyyyy
                //=========================================================
                lError = true;
              }
              else
              {
                //=========================================================
                // yyyy
                //=========================================================
                lJQueryFormat.Append("yy");
                ii = ii + 3;
              }
            }
            else
            {
              //===========================================================
              // yyy
              //===========================================================
              lError = true;
            }
          }
          else
          {
            //=============================================================
            // yy
            //=============================================================
            lJQueryFormat.Append("y");
            ii++;
          }
        }
        else
        {
          //===============================================================
          // y
          //===============================================================
          lError = true;
        }
        break;
      case '.':
      case '-':
      case ' ':
      case '/':
        lJQueryFormat.Append(lCurrentChar);
        break;
      default:
        lError = true;
        break;
    }

    if (lError)
    {
      break;
    }
  }

  //=======================================================================
  // If we didn't get an error return the culture specific formats
  //=======================================================================
  if (!lError)
  {
    xoCSharpFormat = lCSharpFormat;
    xoJQueryFormat = lJQueryFormat.ToString();
  }
}

Yea, thanks for the code... I've been thinking about writing some similar conversion code, but for now I've just been using the ISO-date format at both sides. Guess I'll use your class now.
Well, after taking a closer look at the code it seems way too complicated to me - using such a complex handling would be only justifiable if ALL cases are handled - including month names and day names. Since the provided code only handles ShortDatePattern, the string-replacement code provided in my answer will do about the same in 4 lines. Or did I miss the point of your code?
It's quite large because it's fairly defensive and I had half an eye on extending it in the future (although given the limited overlap between the jQuery and MS format strings that may not be possible). In the (probably unlikely I admit) case that Microsoft were to add a short date format that used ddd or MMM or some other new character the simple code would leave in extra letters while mine would use it's default format instead. BTW I think you could shorten your code further by removing the MM replace?
Of course your code is pretty defensive :-) Still if you only handle ShortDatePattern, the short version will do. However, when extending to (almost) all possible formats, some construct like yours will be needed. And you're right, I removed the MM replace...

Jeremy · Accepted Answer · 2012-04-11 21:03:42Z

I use this to convert from a datetime format in .net to jQuery. Loosely based on Dan's answer:

/// <summary>
/// Convert a .net date format to jQuery
/// </summary>
/// <param name="sFormat"></param>
/// <returns></returns>
private string ConvertDateFormatToJQuery(string sFormat)
{
    if (string.IsNullOrEmpty(sFormat))
    {
        return null;
    }

    StringBuilder sbOutput = new StringBuilder("");
    string sDatePartChars = "dDmMyY";

    char cLast = sFormat[0];
    StringBuilder sbDatePart = new StringBuilder("");

    //Loop through char by char, extracting each date part or whitespace/seperator into individual components, and convert each component as we go
    foreach (char c in sFormat)
    {
        //Whitespace, or seperator
        if (sDatePartChars.IndexOf(c) == -1)
        {
            //If there is a currently extracted date part, convert
            sbOutput.Append(ConvertDatePartToJQuery(sbDatePart.ToString()));
            sbDatePart.Clear();

            //Whitespace or serator, just append to output
            sbOutput.Append(c.ToString());

            cLast = c;
        }
        else if (c.Equals(cLast))
        {
            //Same date part, extract it
            sbDatePart.Append(c.ToString());
        }
        else
        {
            //We've come to the beginning of a new date part, convert the currently extracted date part
            sbOutput.Append(ConvertDatePartToJQuery(sbDatePart.ToString()));

            sbDatePart.Clear();
            sbDatePart.Append(c.ToString());
            cLast = c;
        }
    }
    //Convert any remaining date part
    sbOutput.Append(ConvertDatePartToJQuery(sbDatePart.ToString()));
    return sbOutput.ToString();
}

/// <summary>
/// Converts a date part (month,day,year) to JQuery format.  Unrecongized formats will just pass through
/// </summary>
/// <param name="sDatePart"></param>
/// <returns></returns>
private string ConvertDatePartToJQuery(string sDatePart)
{
    //=======================================================================   
    // Handle:   
    //  C#     jQuery  Meaning   
    //  d      d       Day of month (no leading 0)  
    //  dd     dd      Day of month (leading 0)   
    //  ddd    D       Day name short
    //  dddd   DD      Day name long
    //  M      m       Month of year (no leading 0)   
    //  MM     mm      Month of year (leading 0)   
    //  MMM    M       Month name short
    //  MMMM   MM      Month name long
    //  yy     y       Two digit year   
    //  yyyy   yy      Four digit year 
    //======================================================================= 

    string sJQueryDatePart = "";
    //We've come to the beginning of a new date part, convert the currently extracted date part
    if (!string.IsNullOrEmpty(sDatePart))
    {
        if (sDatePart[0] == 'M')
        {
            if (sDatePart.Length == 1) //Month, no leading 0
            {
                sJQueryDatePart = "m";
            }
            else if (sDatePart.Length == 2) //Month, leading 0
            {
                sJQueryDatePart = "mm";
            }
            else if (sDatePart.Length == 3) //Month, short name
            {
                sJQueryDatePart = "M";
            }
            else if (sDatePart.Length == 4) //Month, long name
            {
                sJQueryDatePart = "MM";
            }
            else
            {
                //invalid, just leave it
                sJQueryDatePart = sDatePart;
            }
        }
        else if (sDatePart[0] == 'd')
        {
            if (sDatePart.Length == 1) //Day, no leading 0
            {
                sJQueryDatePart = "d";
            }
            else if (sDatePart.Length == 2) //Day, leading 0
            {
                sJQueryDatePart = "dd";
            }
            else if (sDatePart.Length == 3) //Day, short name
            {
                sJQueryDatePart = "D";
            }
            else if (sDatePart.Length == 4) //Day, long name
            {
                sJQueryDatePart = "DD";
            }
            else
            {
                //invalid, just leave it
                sJQueryDatePart = sDatePart;
            }
        }
        else if (sDatePart[0] == 'y')
        {
            if (sDatePart.Length <= 2) //Year, two digit
            {
                sJQueryDatePart = "y";
            }
            else if (sDatePart.Length > 2) //Year four digit
            {
                sJQueryDatePart = "yy";
            }
            else
            {
                //invalid, just leave it
                sJQueryDatePart = sDatePart;
            }
        }
        else
        {
            //invalid, just leave it
            sJQueryDatePart = sDatePart;
        }
    }
    return sJQueryDatePart;
}

Josh Stodola · Accepted Answer · 2009-08-07 13:22:28Z

1

I think this will be the easiest way...

string dateFormat = currentCultureInfo.DateTimeFormat.ShortDatePattern.Replace("MM", "mm");
string jsCode = @"$("".datepicker"").datepicker({
    dateFormat: '" + dateFormat + @"',
});";

answered Aug 7, 2009 at 13:22

Josh Stodola

82.8k48 gold badges187 silver badges229 bronze badges

1 Comment

mattanja Over a year ago

What about the different year format? But yeah if you add a replacement for the year format, this is a lot easier way than Dan's answer.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

It may not be the perfect solution but it can get you started. jQuery doesn't have any methods for working with dates but JavaScript does.

Parsing Date

First it has a method Date.parse() which allows you to parse date strings to value containing number of miliseconds from January 1st 1970. You can then use this value to create a new date object and extract all the data you need from this object.

var dateString = "Jun 1 2006";
var parsedDate = Date.parse(dateString);
var date = new Date(parsedDate);

Unfortunately Date.parse() doesn't handle well 'dotted' strings like 2007.03.01 but there is a solution for that as well. You can just replace all dots with slashes:

var dateString = "2007.03.01".replace(/\./g, '/');

Still this won't make Date.parse() understand any date format that .NET will return but may be useful in some cases.

Formating Date

Now if you have Date object created you may now convert it to any date format you like. This actually is pretty easy. There is an implementation of PHP date format method for JS. You can find it here.

If you add that to your scripts you can than format your date using any tokens described in the documentation and there are plenty. For example

date.format('Y-M-d H:i:s');

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 16, 2009 at 18:27

RaYell

70.6k20 gold badges127 silver badges154 bronze badges

3 Comments

Crescent Fresh Over a year ago

Asker already has a date formatting library. Asker doesn't need one that understand php's date format. Asker needs one that can understand/translate-to .NET's format.

RaYell Over a year ago

You don't need to understand php's date format, all switches are explained in the date format for JS documentation.I'm not sure if parser can handle all .NET's formats but surely this solution can be adapted to handle them. As I mentioned in my first sentence this is not a complete solution, more something you can start to work with.

mattanja Over a year ago

Thanks for your answer, but as crescentfresh said it's not really what I need. But it may help to think another way - one could prepare a javascript Date object with an ISO-Format and use that object to initialize the datepicker. Unfortunately the string returned by the datepicker still would be in another format. So, if there is no existing transformation library I guess I will have to write my own...

Collectives™ on Stack Overflow

Convert .NET DateTimeFormatInfo to Javascript jQuery formatDate?

5 Answers 5

Comments

4 Comments

Comments

1 Comment

Parsing Date

Formating Date

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

1 Comment

Parsing Date

Formating Date

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related