IT

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

lottoking 2020. 8. 18. 07:55
반응형

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

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

당신은하지 않습니다.

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

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

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

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;
}

다수 :

여기에 이미지 설명 입력

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

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

또는 빈티지 방법이 있습니다.

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)

날짜 유형을 지원하는 브라우저에서 작동하고 아직 날짜 유형을 지원하지 않는 파이어 폭스와 같은 다른 브라우저에서 계속 작동하도록하는 다른 속성과 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"/>

HTML에는 DD-MM-YYYY 형식에 대한 구문이 중요하다고 생각합니다. 이 페이지 http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm을 참조 하십시오 . 어느 정도 도움이 될 것입니다. 당신의 날짜 선택기를 사용하십시오.

확실히 모르겠지만 사용자의 날짜 / 시간 설정에 따라 브라우저에서 처리해야 할 생각합니다. 해당 형식으로 날짜를 표시합니다.

$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});

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

제 생각에 가장 좋은 해결책은 사용하여 앰프를 제어하는 ​​것입니다.

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

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

내 솔루션은 약간의 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 ()'에 입력하면 예기치 않은 결과가 발생한다는 점을 명심하십시오. (즉-하루 뒤)

종속성없이 깔끔한 구현. 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>

짧은 직접 답변은 아니요 또는 상자에서 나오지 않지만 텍스트 상자와 순수한 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입니다.

mm-dd-yyyy 형식의 경우

aa = date.split ( "-")

date = aa [1] + '-'+ aa [2] + '-'+ aa [0]

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

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

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

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

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

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

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

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

참고 URL : https://stackoverflow.com/questions/6978631/how-to-set-date-format-in-html-date-input-tag

반응형

'IT' 카테고리의 다른 글

UITableView의 배경을 터치하여 키보드 닫기  (0) 2020.08.18
단위 테스트를 위해 비공개 메서드를 공개하는 중입니다. 좋은 생각인가요?  (0) 2020.08.18
Java에 좋은 동적 SQL 빌더 라이브러리가 있습니까?  (0) 2020.08.18
R에서`=`와`<-`의 차이점은 무엇입니까?  (0) 2020.08.18
PHP에서 MySQL API를 혼합 할 수 있습니까?  (0) 2020.08.18

'IT'의 다른글

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

관련글

댓글

티스토리툴바