jQuery datepicker's dateFormat - come integrare con .NET current culture DateTimeFormat

Question

Sto usando il plug-in DatePicker di jQuery nell'applicazione intranet .NET ASP MVC3. Gli utenti che utilizzano l'applicazione hanno uffici in diversi paesi e diverse impostazioni internazionali. Questo è il motivo per cui ho voluto integrare Thread.CurrentThread.CurrentCulture.DateTimeFormat con jQuery datepicker plug-in. La mia prima soluzione era quella di creare metodo di estensione di supporto:

public static string jQueryDatePickerFormat(this HtmlHelper helper) 
    { 
     return Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern; 
    } 

e impostare dateFormat opzione in javascript come questo:

$("#StartDate").datepicker({ dateFormat: '@Html.jQueryDatePickerFormat()' }); 

Subito dopo mi sono reso conto che dateFormat opzione di datepicker supporta i formati che hanno diversi implementazione dal formato in .NET.

Per esempio: Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern per pl-PL restituisce yyyy-MM-dd (sarà formato data 2010-01-01), mentre lo stesso formato in datepicker formatta la stessa data di 20102010 gennaio 01. Ho subito adattato il mio metodo di supporto e applicato soluzione rapida Sostituire ("yyyy", "aa") Sostituire ("MM", "mm"):.

public static string jQueryDatePickerFormat(this HtmlHelper helper) 
    { 
     return Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern.Replace("yyyy", "yy").Replace("MM", "mm"); 
    } 

mi funziona, ma aspettare il momento quando emergeranno altri problemi. C'è un modo semplice per implementare le impostazioni internazionali di .NET nel plugin datePicker di jQuery?

Grazie, Pawel

Answer 1

L'articolo CodeProject jQueryUI Datepicker in ASP.NET MVC http://www.codeproject.com/Articles/62031/JQueryUI-Datepicker-in-ASP-NET-MVC ha funzione che fa esattamente quello che volevi

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

ho anche postato una funzione che fa l'opposto: Translate jQuery UI Datepicker format to .Net Date format

Answer 2

ho sumbled sullo stesso problema qualche tempo fa. Il percorso che ho preso è stato solo per convertire qualunque jQuery DatePicker mi fornisca a milis (.getTime()). Sapendo che il tempo di javascript è basato sulla data di 1,1,1970 e .NET su 1,1,0 sono in grado di eseguire il calcolo sul mio controller

Quindi, supponendo che tu stia passando javscript DateTime.getTime () valore al tuo controller che puoi;

var myDate = new DateTime(1970, 1, 1) + new TimeSpan(time * 10000); 

dal tuo punto di vista;

$.datepicker.setDefaults($.datepicker.regional["pl"]); 

    $("#StartDate").datepicker({ 
     dateFormat: "yy-mm-dd", 
     onSelect: function (dateText) { 
      var currentDate = new Date(dateText); 
      time = currentDate.getTime(); 
      // $.post | $.ajax here - whatever you need 
     } 
    }); 

Si vuole ricordare a proposito TimeZones e il fatto che JavaScript tiene che in considerazione nel calcolo date.

Answer 3

negozio in campo nascosto

 <input id="dateFormate" type="hidden" 
value='@System.Threading.Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern.ToLower().Replace("yyyy", "yy")'/> 

     @Html.HiddenFor(model=>model.StartDate) 
     @Html.HiddenFor(model=>model.EndDate) 
     <input type="text" id="tbStartDate" value="" disabled="disabled" /> 
     <input type="text" id="tbEndDate" value="" disabled="disabled" /> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#tbStartDate").datepicker({ 
        dateFormat: $('#dateFormate').val(), 
        showOn: 'button', 
        buttonImageOnly: true, 
        buttonImage: '/Content/Calendar.png', 
        buttonText: 'Click here (date)', 
        onSelect: function (dateText, inst) { 
         var $endDate = $('#tbStartDate').datepicker('getDate'); 
         $endDate.setDate($endDate.getDate() + 1); 
         $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate); 
        }, 
        onClose: function (dateText, inst) { 
         $("#StartDate").val($("#tbStartDate").val()); 
        } 
       }); 

       $("#tbEndDate").datepicker({ 
        dateFormat: $('#df').val(), 
        showOn: 'button', 
        buttonImageOnly: true, 
        buttonImage: '/Content/Calendar.png', 
        buttonText: 'Click here (date)', 
        onClose: function (dateText, inst) { 
         $("#EndDate").val($("#tbEndDate").val()); 
        } 
       }); 

       var $endDate = $('#tbStartDate').datepicker('getDate'); 
       $endDate.setDate($endDate.getDate() + 1); 
       $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate); 
      }); 
     </script>