jQuery datepicker's dateFormat - jak zintegrować z bieżącą kulturą .NET DateTimeFormat

Question

Używam wtyczki datepicker jQuery w aplikacji intranetowej .NET ASP MVC3. Użytkownik korzystający z aplikacji ma biura w różnych krajach i różnych lokalizacjach. Właśnie dlatego chciałem zintegrować Thread.CurrentThread.CurrentCulture.DateTimeFormat z jQuery datepicker plugin. Moje pierwsze rozwiązanie było stworzenie metody rozszerzenie pomocnika:

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

i ustawić dateformat opcję w javascript tak:

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

Wkrótce zdałem sobie sprawę, że dateformat opcja datepicker obsługuje formaty, które mają różne implementacja z formatu w .NET.

Na przykład: Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern na pl-PL powraca rrrr MM-dd (to format daty jako 2010-01-01), podczas gdy w tym samym formacie, w Datepicker sformatuje tę samą datę, co 20102010 styczeń 01. I szybko dostosować moje metody pomocnika i zastosowano szybkie ustalenie Replace ("yyyy", "YY") zastąpić ("MM", "mm").

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

I działa, ale czekam na moment, kiedy pojawią się inne problemy. Czy istnieje prosty sposób implementacji ustawień regionalnych .NET do wtyczki datePicker jQuery?

Dzięki Paweł

Answer 1

Artykuł CodeProject jQueryUI Datepicker w ASP.NET MVC http://www.codeproject.com/Articles/62031/JQueryUI-Datepicker-in-ASP-NET-MVC posiada funkcję, która robi dokładnie to, czego chciał

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

Ja również pisał funkcji, które wykonuje się opposite- Translate jQuery UI Datepicker format to .Net Date format

Answer 2

Mam sumbled na ten sam problem jakiś czas temu. Ścieżka, którą podjąłem, była właśnie po to, aby przekonwertować dowolny datepicker jQuery na milis (.getTime()). Wiedząc, że czas javascript opiera się na dacie 1,1,1970 i .NET na 1,1,0, jestem w stanie wykonać obliczenia po stronie mojego kontrolera

Zakładając, że podajesz javscript DateTime.getTime () wartość do kontrolera można;

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

w twoim widoku możesz;

$.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 
     } 
    }); 

Będziesz chciał pamiętać o strefach czasowych i fakt, że javascript bierze to pod uwagę przy obliczaniu dat.

Answer 3

sklep w ukrytym polu

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