JQuery移動UI日期選擇器格式

Question

我使用這個JQuery插件http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/在我的應用程序上有一個日曆，但唯一的問題是它被格式化爲mm/dd/yyyy。我已經對如何改變這個問題做了一些研究，但迄今爲止沒有多少運氣。

我想將它格式化爲dd/mm/yyyy。我曾嘗試添加一些JavaScript函數來改變它，但迄今爲止沒有任何運氣。

這是我的壓延機的HTML代碼：

<form action="#" method="get"> 
    <div data-role="fieldcontain"> 
     <label for="date">Date Input:</label> 
    <br> 
     <input type="date" name="date" id="date" style="width: 50%;" /> 
    </div>  
    </form> 

這是JavaScript，我一直試圖去改變格式，但我還沒有多少運氣：

var date = $('#date').datepicker({ dateFormat: 'dd-mm-yy' }).val(); 

到目前爲止，這只是將輸入框中的佔位符更改爲dd/mm/yyyy，並且在日曆上選擇了新日期時，它不會更改。

我將不勝感激任何幫助。

Answer 1

解決方案

工作例如：http://jsfiddle.net/Gajotres/PMrDn/65/

更改的javascript：

/* 
* jQuery Mobile Framework : temporary extension to port jQuery UI's datepicker for mobile 
* Copyright (c) jQuery Project 
* Dual licensed under the MIT or GPL Version 2 licenses. 
* http://jquery.org/license 
*/ 
(function($, undefined) { 

    //cache previous datepicker ui method 
    var prevDp = $.fn.datepicker; 

    //rewrite datepicker 
    $.fn.datepicker = function(options){ 

     var dp = this; 

     //call cached datepicker plugin 
     prevDp.call(this, options); 

     //extend with some dom manipulation to update the markup for jQM 
     //call immediately 
     function updateDatepicker(){ 
      $(".ui-datepicker-header", dp).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all"); 
      $(".ui-datepicker-prev, .ui-datepicker-next", dp).attr("href", "#"); 
      $(".ui-datepicker-prev", dp).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true}); 
      $(".ui-datepicker-next", dp).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true}); 
      $(".ui-datepicker-calendar th", dp).addClass("ui-bar-c"); 
      $(".ui-datepicker-calendar td", dp).addClass("ui-body-c"); 
      $(".ui-datepicker-calendar a", dp).buttonMarkup({corners: false, shadow: false}); 
      $(".ui-datepicker-calendar a.ui-state-active", dp).addClass("ui-btn-active"); // selected date 
      $(".ui-datepicker-calendar a.ui-state-highlight", dp).addClass("ui-btn-up-e"); // today"s date 
      $(".ui-datepicker-calendar .ui-btn", dp).each(function(){ 
       var el = $(this); 
       // remove extra button markup - necessary for date value to be interpreted correctly 
       el.html(el.find(".ui-btn-text").text()); 
      }); 
     }; 

     //update now 
     updateDatepicker(); 

     // and on click 
     $(dp).click(updateDatepicker); 

     //return jqm obj 
     return this; 
    }; 

    //bind to pagecreate to automatically enhance date inputs 
    $(document).on("pagecreate", ".ui-page",function(){   
     $("input[type='date'], input:jqmData(type='date')").each(function(){ 
      $(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: 'dd-mm-yy' })); 
     }); 
    }); 
})(jQuery); 

實施

首先不包括本文件：

<script src="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script> 

使用JavaScript附加到這個答案，基本上它是一樣的頂級鏈接的JavaScript只是修改爲使用新版本的jQuery加上你的日期格式。如果想要另一個日期格式只是手動更改這一行：

$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: 'dd-mm-yy' })); 

Answer 2

這裏是解決方案。

var date = $('#date').datepicker({ dateFormat: 'dd-mm-yy' }).val(); 

，您還可以查看以下鏈接：

http://docs.jquery.com/UI/Datepicker#option-dateFormat

http://docs.jquery.com/UI/Datepicker/formatDate