Konvertieren von .NET DateTimeFormatInfo in Javascript jQuery FormatDate?

Question

Ich habe einen jQuery UI Datepicker, den ich mit einem Textfeld in ASP.NET MVC verwenden möchte. Die Datumsanzeige in der Textbox lokalisiert über Culture und natürlich sollte von jquery anerkannt werden, um das richtige Datum in der Datumsauswahl wählen:

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

Was ich versuche jetzt zu tun ist, um die Datepicker mit einem Datumsformat zu initialisieren wie

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

das Problem ist, dass das Format des Formatstring von Datetime (MSDN-Link) das Format-String in jQuery (jQuery formatDate) völlig anders.

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

Probe (Deutsch Datumsformat wie 16.07.2009):

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

Gibt es eine Methode oder eine Bibliothek, die die notwendige Transformation zwischen den beiden Formaten tut?

Answer 1

Wenn ShortDatePattern nur umgewandelt werden müssen, liefert der folgende Code, was ich brauche:

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"); 
    } 
} 

Einschließlich Javascript in Seite:

/// <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>") 
     ); 
    } 

Dies ist jedoch nicht behandelt Monat oder Tag Namen, Zeitformatierung oder andere Sonderfälle.

Answer 2

Es kann nicht die perfekte Lösung sein, aber es kann Ihnen den Anfang machen. jQuery hat keine Methoden, um mit Daten zu arbeiten, aber JavaScript tut es.

Parsing Datum

Zuerst hat sie eine Methode Date.parse(), die Sie Datum Strings Wert enthält Anzahl von Millisekunden ab dem 1. Januar 1970. Sie können dann diesen Wert verwenden, um erstellen Sie ein neues Date-Objekt und extrahieren alle zu analysieren erlaubt es dem Daten, die Sie von diesem Objekt benötigen.

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

Leider Date.parse() behandelt nicht gut ‚übersät‘ Strings wie 2007.03.01 aber es gibt eine Lösung für das auch. Sie können nur alle Punkte mit Schrägstrichen ersetzen:

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

Noch wird dies nicht Date.parse() jedes Datumsformat verstehen, die .NET zurückkehren wird, kann aber in manchen Fällen nützlich sein.

Formating Datum

Nun, wenn Sie Date-Objekt erstellt haben, können Sie diese nun in jedem Datumsformat konvertieren Sie möchten. Das ist eigentlich ziemlich einfach. Es gibt eine Implementierung der PHP-Datumsformatmethode für JS. Sie können es here finden.

Wenn Sie das zu Ihren Skripten hinzufügen, können Sie Ihr Datum mit den in der Dokumentation beschriebenen Tokens formatieren, und es gibt viele. Zum Beispiel

Answer 3

Ich habe gerade in genau das gleiche Problem gerannt und kam mit dem Code unten. Es ist nicht perfekt, aber sollte die meisten Kulturen abdecken und anmutig ausfallen. Es ist wahrscheinlich auch nicht die kürzeste Version, die Sie sich vorstellen können!

///======================================================================== 
/// 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(); 
    } 
} 

Answer 4

Ich denke, das wird der einfachste Weg sein ...

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

Answer 5

Ich benutze diese von einem Datetime-Format in .net zu jQuery zu konvertieren. Basierend auf Dans Antwort:

/// <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; 
}