2016-08-17 3 views
0

형식이 "날짜"로 설정된 HTML5 입력 필드를 사용할 때 문제가 있습니다. 다음과 같이HTML5 입력 날짜 유형이 일관된 형식으로 저장되지 않습니다.

내 테스트 페이지는 다음과 같습니다

<!DOCTYPE html> 
<html> 

<head> 
    <script> 
    function testDate() { 
     window.alert("Date: " + document.getElementById("date").valueAsDate.toJSON()); 
    } 
    </script> 
</head> 

<body> 
    <form> 
     <label for="date">Date</label> 
     <input id="date" type="date" onchange="testDate()" required /> 
    </form> 
</body> 

</html> 

내가 오페라에서이 페이지를로드하는 경우

, 나는 '날짜 선택'함께 제시하고있다. 나는 파이어 폭스에서 페이지를로드하는 경우

"Date: 2016-06-10T00:00:00.000Z" 

, 나는 '어떤 종류를 얻을하지 않습니다 : I 8 월 2016 10를 선택하는 경우는 다음과 같은 표시 즉, 내가 올바른 동작을 나타내는 팝업 창이 나타 있어요 데이트 피커 (date picker) '를 선택하면 내가 원하는 모든 가치를 입력 할 수 있습니다. 모든 경우에

  • 2016년 10월 8일
  • 2016년 10월 8일
  • 2016년 8월 10일

나는이 (가)에 기록 다음 얻을 : 나는 다음과 같은 입력을 시도 콘솔 : 내 실제 코드에서

TypeError: document.getElementById(...).valueAsDate is undefined 

, 나는 단순히 사용자가 날짜를 선택하고 JSON 날짜로 변환 한 다음 XMLHttpRequest를 통해 보낼 수 있도록하려면, 하지만 날짜 형식에서 일관성을 찾을 수 없습니다.

누군가가 도움을 줄 수 있습니까?

+0

'date' 입력 유형은 Firefox에서 지원되지 않습니다. http://www.w3schools.com/html/html_form_input_types.asp '입력 유형 : 날짜'를 찾으십시오. – Mike

답변

1

현재 브라우저 관련 웹 응용 프로그램을 만들지 않은 경우 필드를 사용하기에는 너무 빠릅니다. here - Firefox, Safari 및 Internet Explorer는 이러한 종류의 입력 필드를 지원하지 않습니다.

사용자 입력을 간단하게 검증하는 데 사용할 수있는 pattern attribute을 사용할 수 있습니다. 그것은 더 나은 지원을 가지고 있지만, 여전히 완벽하지는 않습니다.

one of these vanillaJS datepicker implementations을 사용해 볼 수도 있습니다.

+0

감사합니다. 지금 당장은 날짜 유형을 사용하지 않을 것입니다. 그 동안 DD/MM/YYYY 형식을 포함하는 텍스트 입력 필드를 취하여 Javascript Date 유형으로 변환하는 가장 좋은 방법을 제안 할 수 있습니까? –

+1

구분 기호로 "/"를 사용하여 값을 분할 한 다음 올바른 순서로 Date 개체 생성자에 매개 변수를 적용해야합니다. –

+0

감사합니다. 나는이 일을했다 : 'var date = new Date (dateString.split ('/') [2], dateString.split ('/') [1] - 1, dateString.split ('/') [0]); –