JQuery와 모바일 UI 날짜 선택기 형식

Question

내 응용 프로그램에 달력이이 jQuery 플러그인 http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/를 사용하고 있지만, 유일한 문제는 그것이 mm/DD/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> 

:

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

을 지금까지 입력 된 bbox의 자리 표시자를 dd/mm/yyyy로 변경하고 달력에서 새 날짜를 선택하면 변경되지 않습니다.

감사합니다.

Answer 1

솔루션

근무 예 : http://jsfiddle.net/Gajotres/PMrDn/65/

변경 자바 스크립트 :

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

:이 파일을 포함하지 않는

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

구현

우선 0

이 답변에 붙어있는 javascript를 사용하면 기본적으로 새로운 버전의 jQuery와 날짜 형식을 사용하도록 수정 된 상위 링크 javascript와 동일합니다. 다른 날짜 형식을 원할 경우이 행에서 직접 수동으로 변경하십시오.

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