HTML 날짜 입력 태그에서 날짜 형식을 설정하는 방법은 무엇입니까?

105

html <input type="date"></input>태그 에서 날짜 형식을 설정할 수 있는지 궁금합니다 ... 현재 yyyy-mm-dd이지만 dd-mm-yyyy 형식이 필요합니다.

html  date  input  format 
— 표트르
소스
3
HTML5 입력 유형 = 날짜의 값 출력 지정과 중복되지 않습니까? ? 나는 말할 것 이 질문이 여기가 더 나은 하나 그 이전보다 요구되고 있지만, 나이가 하나는 꽤 좋은 답변이 있습니다.
— Arsen7
— Vaibhav Mule
내 국가 설정은 네덜란드어이며 Chrome에서는 DD-MM-YYYY로 표시됩니다. 웹 사이트를 사용하는 클라이언트의 Windows 설정에 따라 다릅니다.
— dark_passages

답변:

11

당신은하지 않습니다.

첫째, 질문이 모호합니다. 사용자에게 표시되는 형식을 의미합니까, 아니면 웹 서버로 전송되는 형식을 의미합니까?

사용자에게 표시되는 형식을 의미하는 경우 이는 HTML에서 지정하는 것이 아니라 최종 사용자 인터페이스에 달려 있습니다. 일반적으로 운영 체제 로캘 설정에 설정된 날짜 형식을 기반으로 할 것으로 예상합니다. 표시되는 형식은 (일반적으로 말해서) 사용자의 로케일과 사용자가 날짜를 작성 / 이해하는 데 사용되는 형식에 대해 올바른 형식이므로 선호하는 형식으로 재정의하는 것은 의미가 없습니다.

서버로 전송되는 형식을 의미하는 경우 잘못된 문제를 해결하려는 것입니다. 당신이해야 할 일은 yyyy-mm-dd 형식의 날짜를 받아들이도록 서버 측 코드를 프로그래밍하는 것입니다.

— 스튜어트
소스
1
안타깝게도 두 번째 의견은 현실 세계에서 사실이 아닙니다. Chrome 및 Opera와 같은 일부 브라우저는 적어도 엔티티 의 순서 를 존중 하지만 그 이상은 아닙니다. 예를 들어, 내 OS 로케일 설정은 짧은 날짜로 올해 8 월 1 일은 1 / 8-2016 이어야 하지만 Chrome 및 Opera도 2016 년 1 월 8 일 표시하도록 지정 합니다. Safari 및 Firefox (적어도 OS X에서는)와 같은 다른 브라우저는 OS 설정을 완전히 무시하고 항상 2016-08-16을 표시 합니다. 사용자가 자신의 날짜 기본 설정을 지정할 수있는 사이트에서는이를 무시하는 것이 당연합니다.
— Janus Bahs Jacquet
(Firefox 및 Safari에 대한 메모는 무시하세요… 피곤합니다. 두 브라우저 모두 날짜 유형을 전혀 지원하지 않으므로 값의 기본 형식 만 표시합니다. 현재 코드의 경우 YYYY-MM-DD입니다. .)
— Janus Bahs Jacquet
대부분의 사람들이 표시 / 입력 날짜 형식을 변경하는 방법을 묻고 사용자가 자신의 선호도를 설정할 수 있도록하거나 세계에 자신이 선호하는 날짜 형식을 적용하기를 원합니까? 후자는 내가 말했듯이 아무도해서는 안되는 일이지만, 전자가 적절한 지 여부에 대해 어느 쪽이든 논쟁 할 수 있습니다. 그러나 그것은 표현 설정이 될 것이므로 HTML의 범위를 벗어납니다.
— Stewart
문제는 설정할 수없는 프레젠테이션 설정 이라는 것입니다 . 일반적으로 프레젠테이션 설정은 CSS에 속하지만 CSS (또는 다른 곳)에서이를 변경할 수있는 방법이 없습니다. 게다가 HTML 스펙 자체조차도 프리젠 테이션 설정에서 자유롭지 않습니다. 예를 들어의 섹션에서는 input[type=password]"사용자 에이전트가 값을 가려서 사용자가 아닌 다른 사람이 볼 수 없도록해야합니다."라고 말하고 있는데, 이는 사용자 에이전트가 특정 방식으로 날짜를 표시해야한다고 말하는 것과 같은 표현입니다.
— Janus Bahs Jacquet
1
일부는 웹 마스터가 자신이 선호하는 날짜 형식을 전 세계에 적용하는 것을 방지하기 때문에 설정할 수 없다는 것이 좋은 것이라고 말합니다 . 그러나 암호 입력은 생각하게했습니다. 많은 곳에서 HTML 스펙은 기본적으로 브라우저 기본 스타일 시트에 대한 권장 사항 인 프리젠 테이션 권장 사항을 제공합니다. 여기서 차이점은이 특정 표현 측면에 대한 CSS 속성이없는 것 같습니다.
— Stewart
11

stackoverflow에서 동일한 질문 또는 관련 질문을 찾았습니다.

입력 유형 = "날짜"형식을 변경하는 방법이 있습니까?

하나의 간단한 해결책을 찾았습니다. 미립자 형식을 줄 수는 없지만 이렇게 사용자 지정할 수 있습니다.

HTML 코드 :

    <body>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
</body>

CSS 코드 :

#dt{text-indent: -500px;height:25px; width:200px;}

자바 스크립트 코드 :

function mydate()
{
  //alert("");
document.getElementById("dt").hidden=false;
document.getElementById("ndt").hidden=true;
}
function mydate1()
{
 d=new Date(document.getElementById("dt").value);
dt=d.getDate();
mn=d.getMonth();
mn++;
yy=d.getFullYear();
document.getElementById("ndt").value=dt+"/"+mn+"/"+yy
document.getElementById("ndt").hidden=false;
document.getElementById("dt").hidden=true;
}

산출:

여기에 이미지 설명 입력

— 애쉬 밧
소스
더 나은 방법-css를 사용하여 일반 입력에 대한 투명한 날짜 제어 위치
— George Mauer
이에 대한 링크 또는 코드가있는 경우 답장을 보내 주셔서 감사합니다, 나는 업데이트해야
— 인 Ashish을 밧
이것은 훌륭한 옵션입니다.
— Dillon Burnett
나는 그가 CSS 나 자바 스크립트가 아닌 HTML (질문에 근거한)로 가능한지 묻고 있다고 생각한다.
— Shizukura
6

jQuery를 사용하는 경우 여기에 좋은 간단한 방법이 있습니다.

$("#dateField").val(new Date().toISOString().substring(0, 10));

또는 오래된 전통적인 방법이 있습니다.

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
— sean.boyer
소스
4

날짜 유형을 지원하는 브라우저에서 정상적으로 작동하고 아직 날짜 유형을 지원하지 않는 파이어 폭스와 같은 다른 브라우저에서 계속 작동하도록하는 다른 속성과 함께 html5 날짜 제어를 그대로 사용하지 않는 이유

<input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/>
— 폴 IE
소스
<pre> <input type = "text"name = "input1"placeholder = "YYYY-MM-DD"required pattern = "[0-9] {4}-[0-9] {2}-[0-9 ] {2} "title ="이 formart YYYY-MM-DD에 날짜 입력 "/> </ pre>
— Paul IE
8
요구 사항은 분명히 "yyyy-mm-yyyy 형식으로 필요합니다."라고 인용했습니다. 이것이 어떻게 도움이됩니까?
— Harijs Krūtainis
1
Firefox에서는 작동하지 않습니다. 이 html은 자리 표시 자 mm / dd / yyyy가있는 입력을 보여줍니다. 내 창과 Firefox는 모두 네덜란드어를 모국어로 설정합니다. Windows 지역 설정에 2018 년 11 월 30 일의 짧은 날짜가 표시됩니다.
— Roland
1

확실히 모르겠지만 사용자의 날짜 / 시간 설정에 따라 브라우저에서 처리해야한다고 생각합니다. 해당 형식으로 날짜를 표시하도록 컴퓨터를 설정해보십시오.

— 구문 오류
소스
1 
$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});
— Dheeraj Rao
소스
3
즉각적인 도움을 줄 수있는이 코드 스 니펫에 감사드립니다. 적절한 설명 은 이것이 문제에 대한 좋은 해결책 인 이유 를 보여줌으로써 교육적 가치를 크게 향상시키고 유사하지만 동일하지는 않은 질문을 가진 미래의 독자에게 더 유용하게 만들 것입니다. 제발 편집 설명을 추가하고, 제한 및 가정이 적용 무엇의 표시를 제공하는 답변을.
— Toby Speight
1

나는 많은 연구를했지만 <input type="date">. 브라우저는 로컬 형식을 선택하고 사용자 설정에 따라 사용자의 언어가 영어 인 경우 날짜는 영어 형식 (mm / dd / yyyy)으로 표시됩니다.

제 생각에 가장 좋은 해결책은 플러그인을 사용하여 디스플레이를 제어하는 ​​것입니다.

Jquery DatePicker 는 현지화 , 날짜 형식을 강제 할 수 있기 때문에 좋은 옵션으로 보입니다 .

— Fifi
소스
1

나는 내가 읽은 것보다 약간 다른 대답을 내놓았다.

내 솔루션은 약간의 JavaScript와 html 입력을 사용합니다.

입력에 의해 승인 된 날짜는 'yyyy-mm-dd'형식의 문자열이됩니다. 분할하여 new Date ()로 적절하게 배치 할 수 있습니다.

다음은 기본 HTML입니다.

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

다음은 기본 JS입니다.

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

원하는 방식으로 날짜 형식을 지정할 수 있습니다. 새 Date ()를 만들고 거기에서 모든 정보를 가져 오거나 단순히 'userDate []'를 사용하여 문자열을 만들 수 있습니다.

날짜를 'new Date ()'에 입력하면 예기치 않은 결과가 발생한다는 점을 명심하십시오. (즉-하루 뒤)

— thielr7
소스
1 
<html>

    <body>
        <p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
        <button onclick="f()">submit</button>
        <script>
            var a;

            function myFunction(val){
                a = val.split("-").reverse().join("-");
                document.getElementById("value").type = "text";
                document.getElementById("value").value = a;
            }

            function f(){
                document.getElementById("result").innerHTML = a;
                var z = a.split("-").reverse().join("-");
                document.getElementById("value").type = "date";
                document.getElementById("value").value = z;
            }

        </script>
    </body>

</html>
— 팔라 다타 드리
소스
2
여기에 HTML 코드를 게시 할 때 코드 형식을 지정하는 것이 매우 중요합니다. 그렇지 않으면 페이지의 일부로 서식이 지정되어 있고 답변이 답변처럼 보이지 않습니다. 포맷하는 방법을 모른다 면 도움말 센터에 멋진 가이드가 있습니다
— Zoe
0

짧은 직접 대답은 아니요 또는 상자에서 나오지 않지만 텍스트 상자와 순수한 JS 코드를 사용하여 날짜 입력을 시뮬레이션하고 원하는 형식을 수행하는 방법을 생각해 냈습니다. 여기에 코드가 있습니다. 

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

1-이 방법은 날짜 유형을 지원하는 브라우저에서만 작동합니다.

2- JS 코드의 첫 번째 기능은 날짜 유형을 지원하지 않고 모양을 일반 텍스트 입력으로 설정하는 브라우저 용입니다.

3- 페이지의 여러 날짜 입력에이 코드를 사용할 경우 함수 호출과 입력 자체 모두에서 텍스트 입력의 ID "xTime"을 다른 것으로 변경하고 물론 원하는 입력 이름을 사용하십시오. 양식 제출.

4- 두 번째 함수에서는 day + "/"+ month + "/"+ year 예를 들어 year + "/"+ month + "/"+ day 대신 원하는 형식을 사용할 수 있으며 텍스트 입력에서 자리 표시 자 또는 값을 다음과 같이 사용하십시오. 페이지가로드 될 때 사용자의 yyyy / mm / dd입니다.

— 그늘진
소스
-1

종속성없이 깔끔한 구현. https://jsfiddle.net/h3hqydxa/1/

  <style type="text/css">
    .dateField {
      width: 150px;
      height: 32px;
      border: none;
      position: absolute;
      top: 32px;
      left: 32px;
      opacity: 0.5;
      font-size: 12px;
      font-weight: 300;
      font-family: Arial;
      opacity: 0;
    }

    .fakeDateField {
      width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */
      height: 32px; /* same as above */
      border: none;
      position: absolute; /* position overtop the date field */
      top: 32px;
      left: 32px;
      display: visible;
      font-size: 12px; /* same as above */
      font-weight: 300; /* same as above */
      font-family: Arial; /* same as above */
      line-height: 32px; /* for vertical centering */
    }
  </style>

  <input class="dateField" id="dateField" type="date"></input>
  <div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div>

  <script>
    var dateField = document.getElementById("dateField");
    var fakeDateField = document.getElementById("fakeDateField");

    fakeDateField.addEventListener("click", function() {
      document.getElementById("dateField").focus();
    }, false);

    dateField.addEventListener("focus", function() {
      fakeDateField.style.opacity = 0;
      dateField.style.opacity = 1;
    });

    dateField.addEventListener("blur", function() {
      fakeDateField.style.opacity = 1;
      dateField.style.opacity = 0;
    });

    dateField.addEventListener("change", function() {
      // this method could be replaced by momentJS stuff
      if (dateField.value.length < 1) {
        return;
      }

      var date = new Date(dateField.value);
      var day = date.getUTCDate();
      var month = date.getUTCMonth() + 1; //zero-based month values
      fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day;
    });

  </script>
— 제임스 페리
소스
-2

해결책은 다음과 같습니다. 

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

이 문제가 해결되기를 바랍니다. :)

— 무하마드 와카 스
소스
1
귀하의 솔루션은 날짜 유형 HTML 입력을 사용하지 않으므로 실제로 질문에 대답하지 않습니다.
— 빈센트
유형을 날짜로 설정할 필요가 없습니다. datepicker의 경우 날짜없이 작동합니다. 시도해보세요. 문제가 해결되기를 바랍니다.
— Muhammad Waqas
-3

날짜 값의 형식은입니다 'YYYY-MM-DD'. 다음 예를 참조하십시오.

<form>
<input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/>
</form>

당신이 필요로하는 것은 날짜를 php, asp, ruby ​​또는 그 형식을 갖도록하는 것입니다.

— Charmi
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.