2014-05-09 6 views
1

JQuery UI를 사용하여 날짜를 입력하고 DatePicker를 사용합니다.Datepicker에서 표시된 날짜 형식을 변경하는 방법은 무엇입니까?

enter image description here

나는 날짜가 yyyy-mm-dd처럼 표시되어 있어야합니다. 콘솔에 반환 how to change dateformat of jquery Datepicker

$(".date-input").datepicker({ dateFormat: 'yy-dd-mm' }); 

:

나는 콘솔에서이 대답 제안이 솔루션을 시도

[<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_TO" title=​"Enter date you plan to go to your destination" placeholder=​"Go to date" type=​"date" value=​"2014-05-08 00:​00:​00" id=​"dp1399632827005">​, 
<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_FROM" title=​"Enter the date when you plan to come back" placeholder=​"Come back date" type=​"date" value=​"2014-05-13 00:​00:​00" id=​"dp1399632827006">] 

을하지만 아무 변화가 발효되지 않습니다.

그렇다면 Datepicker에서 표시된 날짜 형식을 변경하는 방법은 무엇입니까?

나중에 편집 : 코드가 작동하지만, 나는 그것이 유형의 날짜 형식에 대한 작업을 만들고 싶어 : 나는 type="date" (http://jsfiddle.net/Zksv5/ 참조) type="text"로 변경하는 경우

.

따라서 입력에 type="date" 속성이있는 경우 Datepicker에서 표시된 날짜 형식을 변경하는 방법은 무엇입니까?

+0

콘솔에서 오류가 발생 했습니까? – Rorschach

+0

@Rorschach 위의 질문에 넣은 두 줄을 반환했습니다. –

+0

이것이 방법입니다. 그것은 잘 작동합니다. 여기를 참조하십시오 : http://jsfiddle.net/abhitalks/w5YQk/. 물론, 코드의 다른 곳에서의 문제. – Abhitalks

답변

1

당신이하고있는 것은 jQuery를 UI에서 datepicker를 포맷 할 수있는 권리 방법입니다 워킹을 참조하십시오.

는 여기를 참조하십시오 : http://jsfiddle.net/abhitalks/w5YQk/

HTML :

<input id="dated" /> 

jQuery를 코드 :

$("#dated").datepicker({ dateFormat: 'yy-dd-mm' }); 

업데이트 (HTML5 date 유형에 귀하의 의견에 따라) : Is there any way to change input type="date" format?를 : 이미 여기에 설명 된 내용을 반복하지 않고

  1. 짧은 대답은 사양 와이어 형식 "YYYY-MM 점이다 -dd "이지만 브라우저는 프리젠 테이션을 자유롭게 결정할 수 있습니다. 일부 브라우저 (예 : Chrome)는 클라이언트 컴퓨터의 지역 설정과 같은 날짜를 표시하지만 기타 (Opera와 같은) 은 유선 형식을 제공합니다. 그래서 여기서 많은 일을 할 수 없습니다.

  2. 입력이 HTML5 date 유형 일 때 jQuery UI datepicker이 실패합니다. 실제로 형식이 설정되어있을 때만 작동하며 은 입력 형식 date의 와이어 형식으로 변환됩니다!그래서 다시 여기서 많은 일을 할 수 없습니다.

  3. 이상적으로, 당신이 jQuery를 (또는 다른)을 제시해야 datepicker HTML5 date 유형에 대한 어떤 브라우저 지원이있는 경우. 지원되는 경우 기본 브라우저 구현을 선호해야합니다.

그래서, 당신은 여기에 두 가지 옵션이 있습니다 (가)를 사용하여 일반 text 유형을 일반적인 모양과 느낌을 제공하는 datepicker을 첨부합니다. (b)date 유형에 의존하고 브라우저가 HTML5 date 유형을 지원하지 않는 경우에만 datepicker으로 대체하십시오.

원하는 라이브러리를 사용하여 브라우저 기능 감지에 따라 결정할 수 있습니다. 당신이 그것을 직접 수행 할 경우 (예를 들어 모더 나이저 등)

은,이 예제를 (설명은 코드 주석과 같이 포함) 도움이 될 것입니다

데모 : http://jsfiddle.net/abhitalks/w5YQk/3/

HTML :

<input id="dated" type="text" /> <!-- Regular "text" type input --> 
<input id="dated2" type="date" /> <!-- HTML5 "date" type input --> 

jQuery를 코드 :

var dtType; 

// We know this is text type so attaching datepicker 
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' }); 

// We check the type of the second element 
dtType = document.getElementById("dated2").type; 

/* 
If the browser supports html5 date type, then it will return "date". 
If browser doesn't support, it will default to "text" type. 
*/ 

if (dtType == "text") { 
    // Attach datepicker only if type is "text" 
    $("#dated2").datepicker(); 
} 

이 사실을 이용한다 그 HTML5 date 유형 text로 설정됩니다 그래서 요소가 DOM에 text 유형이 될 것입니다 지원하지 않는 브라우저.

희망이 있습니다.

2

는이 jsfiddle

<input type="text" value="" class="date-input" id="TxtStrtDate" > 

$(".date-input").datepicker({ 
    dateFormat: 'yy-dd-mm' 
}); 
+0

링크 된 jsfiddle에서 type = "date"가 변경되어 더 이상 작동하지 않습니다. –

관련 문제