如何讓Kendo DateTimePicker格式像'toLocaleString'一樣工作？

我希望Kendo DateTimePicker的格式與new Date()).toLocaleString("UTC", {timeZone: "UTC"}) + " (UTC)"格式化它的輸出字符串格式（例如2015.04.23 22:15:54（UTC））。我可以使用toLocaleString設置value:，並獲得日期和時間的正確初始格式，但是一旦使用日曆下拉列表更改了日期或時間值，格式就會恢復爲默認值。我無法弄清楚如何設置format屬性來獲得正確的結果。如何讓Kendo DateTimePicker格式像'toLocaleString'一樣工作？

下面是我在劍道UI Dojo和試驗驗證碼： http://dojo.telerik.com/iFiNO/2

<!DOCTYPE html> 
<html> 
<head> 
    <base href="http://demos.telerik.com/kendo-ui/datetimepicker/index"> 
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style> 
    <title></title> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" /> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" /> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" /> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" /> 

    <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script> 
</head> 
<body> 
<input id="datetimepicker" /> 
     <script> 
       $("#datetimepicker").kendoDateTimePicker({ 
        value: (new Date()).toLocaleString("UTC", {timeZone: "UTC"}) + " (UTC)", 
        format: "g" 
       }); 
     </script> 
</body> 
</html>

來源

2015-04-23 Stringfellow

這個格式的值是否像你想要的那樣：'format：「yyyy/MM/dd，HH：mm：ss tt（UTC）」' – jwatts1980

不，這個格式是固定的。格式應根據用戶的區域設置進行更改（例如，在Windows上，「區域」，「語言首選項」設置）。日期可以是yyyy.MM.dd或MM/dd/yy，時間可以是HH：mm或h：mm tt。 – Stringfellow

搜索「kendo datetimepicker全球化」。有關於如何處理這個問題的一些例子。（現在在我的手機上，真的不能發佈例子） – jwatts1980

在劍道UI演示網站，他們有一個日期和時間選擇器（這裏globablization的例子：http://demos.telerik.com/kendo-ui/globalization/index ）以下是完整的代碼示例：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="styles/kendo.common.min.css" /> 
    <link rel="stylesheet" href="styles/kendo.default.min.css" /> 
    <link rel="stylesheet" href="styles/kendo.dataviz.min.css" /> 
    <link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" /> 

    <script src="js/jquery.min.js"></script> 
    <script src="js/kendo.all.min.js"></script> 
</head> 
<body> 
     <script src="../content/web/globalization/cultures/kendo.culture.en-US.js"></script> 
     <script src="../content/web/globalization/cultures/kendo.culture.en-GB.js"></script> 
     <script src="../content/web/globalization/cultures/kendo.culture.de-DE.js"></script> 
     <script src="../content/web/globalization/cultures/kendo.culture.fr-FR.js"></script> 
     <script src="../content/web/globalization/cultures/kendo.culture.bg-BG.js"></script> 

     <div id="example"> 
      <div id="product-view" class=" demo-section k-header"> 
       <div class="right"> 
        <label for="culture">Choose culture:</label> 
        <input id="culture" value="en-US" /> 
       </div> 
       <h2>Product promotion</h2> 
       <ul id="fieldlist"> 
        <li> 
        <label for="startDate">Discount start date:</label> 
        <input id="startDate" /> 
        <input id="startTime" value="12:00 AM" /> 
        </li> 
        <li> 
        <label for="endDate">Discount end date:</label> 
        <input id="endDate" /> 
        <input id="endTime" value="12:00 AM" /> 
        </li> 
        <li> 
        <label for="initial">Initial price:</label> 
        <input id="initial" value="10" min="1"/> 
        </li> 
        <li> 
        <label for="discount">Discount:</label> 
        <input id="discount" value="0.05" min="0" max="0.5" step="0.01"/> 
        </li> 
       </ul> 
      </div> 

      <style> 
       #example h2 { 
      padding: 5px 0 15px; 
        font-weight: normal; 
      border-bottom: 1px solid rgba(128,128,128,.3); 
       } 
       #product-view { 
        overflow: hidden; 
        width: 600px; 
        padding: 20px 20px 0 20px; 
        margin: 30px auto; 
        background-position: 0 -255px; 
       } 

       .right 
       { 
        float:right; 
       } 

       #fieldlist 
       { 
        width: 100%; 
        float:left; 
        margin:0; 
        padding: 10px 0 30px 0; 
       } 

       #fieldlist li 
       { 
        list-style:none; 
        padding:5px 0; 
       } 
       #fieldlist label { 
        display: inline-block; 
        width: 140px; 
        text-align: right; 
       } 

      </style> 

      <script> 
       $(document).ready(function() { 
        function startDateChange() { 
         var date = startDate.value(); 

         if (date) { 
          date = new Date(date); 
          date.setDate(date.getDate() + 1); 
          endDate.min(date); 
         } 
        } 

        function endDateChange() { 
         var date = endDate.value(); 

         if (date) { 
          date = new Date(date); 
          date.setDate(date.getDate() - 1); 
          startDate.max(date); 
         } 
        } 

        function changeCulture() { 
         kendo.culture(this.value()); 

         var datePickerOptions = { 
          format: kendo.culture().calendar.patterns.d 
         }; 

         var timePickerOptions = { 
          format: kendo.culture().calendar.patterns.t 
         }; 

         startDate.setOptions(datePickerOptions); 
         endDate.setOptions(datePickerOptions); 

         startTime.setOptions(timePickerOptions); 
         endTime.setOptions(timePickerOptions); 

         initial.value(initial.value()); 
         discount.value(discount.value()); 
        } 

        var startDate = new kendo.ui.DatePicker($("#startDate"), { change: startDateChange }); 
        var endDate = new kendo.ui.DatePicker($("#endDate"), { change: endDateChange }); 

        var startTime = new kendo.ui.TimePicker($("#startTime")); 
        var endTime = new kendo.ui.TimePicker($("#endTime")); 

        var initial = new kendo.ui.NumericTextBox($("#initial"), { format: "c" }); 
        var discount = new kendo.ui.NumericTextBox($("#discount"), { format: "p" }); 

        var today = new Date(); 

        startDate.value(today); 
        endDate.min(today); 

        today = new Date(today); 
        today.setDate(today.getDate() + 1); 

        endDate.value(today); 
        startDate.max(today); 

        $("#culture").kendoDropDownList({ 
         change: changeCulture, 
         dataTextField: "text", 
         dataValueField: "value", 
         dataSource: [ 
          {text: "bg-BG", value: "bg-BG"}, 
          {text: "de-DE", value: "de-DE"}, 
          {text: "en-US", value: "en-US"}, 
          {text: "en-GB", value: "en-GB"} 
         ] 
        }); 
       }); 
      </script> 
     </div> 


</body> 
</html>

全球化文件鏈接到：http://demos.telerik.com/kendo-ui/content/web/globalization/cultures/kendo.culture.en-US.js。該模式是kendo.culture.{culturename}。這頁http://cdnjs.com/libraries/kendo-ui-core提供CDN鏈接到各種各樣的語言的一噸Kendo文化文件。

希望這應該爲您提供足夠的例子來調整日期/時間選擇器的格式。在上面的代碼示例中，存在這樣的情況，他們展示如何改變模式選項現貨：

var datePickerOptions = { 
    format: kendo.culture().calendar.patterns.d 
};

最後一部分是搞清楚其中的文化，你真正需要的。在上面的例子中，該行

kendo.culture(this.value());

改變了文化。你可以在這裏瞭解更多關於這個內置的Kendo功能：http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-culture

如果你只是打電話kendo.culture()它將返回當前的文化。所以行

format: kendo.culture().calendar.patterns.d

設置當前文化的模式。這個工作的源代碼，你必須加載正確的文化文件。

如果在文化的一個文件看起來更深入，你可以看到的圖案和它們代表什麼格式：

(function(window, undefined) { 
    kendo.cultures["en-US"] = { 
     name: "en-US", 
     numberFormat: { 
      pattern: ["-n"], 
      decimals: 2, 
      ",": ",", 
      ".": ".", 
      groupSize: [3], 
      percent: { 
       pattern: ["-n %","n %"], 
       decimals: 2, 
       ",": ",", 
       ".": ".", 
       groupSize: [3], 
       symbol: "%" 
      }, 
      currency: { 
       pattern: ["($n)","$n"], 
       decimals: 2, 
       ",": ",", 
       ".": ".", 
       groupSize: [3], 
       symbol: "$" 
      } 
     }, 
     calendars: { 
      standard: { 
       days: { 
        names: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"], 
        namesAbbr: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"], 
        namesShort: ["Su","Mo","Tu","We","Th","Fr","Sa"] 
       }, 
       months: { 
        names: ["January","February","March","April","May","June","July","August","September","October","November","December",""], 
        namesAbbr: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""] 
       }, 
       AM: ["AM","am","AM"], 
       PM: ["PM","pm","PM"], 
       patterns: { 
        d: "M/d/yyyy", 
        D: "dddd, MMMM dd, yyyy", 
        F: "dddd, MMMM dd, yyyy h:mm:ss tt", 
        g: "M/d/yyyy h:mm tt", 
        G: "M/d/yyyy h:mm:ss tt", 
        m: "MMMM dd", 
        M: "MMMM dd", 
        s: "yyyy'-'MM'-'dd'T'HH':'mm':'ss", 
        t: "h:mm tt", 
        T: "h:mm:ss tt", 
        u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'", 
        y: "MMMM, yyyy", 
        Y: "MMMM, yyyy" 
       }, 
       "/": "/", 
       ":": ":", 
       firstDay: 0 
      } 
     } 
    } 
})(this);

有許多的參考，這將告訴你如何加載腳本文件使用腳本。或者你可以加載它們，或將它們合併成一個大的JS文件並縮小它。您也可以從該CDN加載文化文件，或者將它們下載到您的服務器並在本地託管它們。

來源

2015-04-27 15:56:27 jwatts1980

如何讓Kendo DateTimePicker格式像'toLocaleString'一樣工作？

回答

相關問題