Как установить формат даты в теге ввода даты HTML? - PullRequest
Новая
       76

Как установить формат даты в теге ввода даты HTML?

97 голосов
/ 08 августа 2011

Мне интересно, можно ли установить формат даты в теге html <input type="date"></input> ... В настоящее время это гггг-мм-дд, а мне нужно его в формате дд-мм-гггг.

Ответы [ 15 ]

0 голосов
/ 26 апреля 2019 
<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>
0 голосов
/ 01 марта 2019

Для форматирования в мм-дд-гггг

аа = date.split ( "-")

дата = аа [1] + '-' + аа [2] + '-' + аа [0]

0 голосов
/ 21 сентября 2018

короткий прямой ответ - «нет» или «нет», но я предложил метод использования текстового поля и чистого кода 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 - если вы будете использовать этот код для ввода нескольких дат на своей странице, пожалуйста, измените идентификатор "xTime" текстового ввода как при вызове функции, так и при самом вводе на что-то другое иКонечно, используйте имя ввода, которое вы хотите для отправки формы.

4 - во второй функции вы можете использовать любой формат, который вы хотите вместо день + "/" + месяц + "/" + год, например, год +"/" + month + "/" + day и при вводе текста используйте заполнитель или значение в качестве гггг / мм / дд для пользователя при загрузке страницы.

0 голосов
/ 11 января 2017

Чистая реализация без зависимостей. 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>
0 голосов
/ 09 марта 2015

Формат значения даты: 'YYYY-MM-DD'. Смотрите следующий пример 

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

Все, что вам нужно, это отформатировать дату в php, asp, ruby ​​или в любом другом формате, чтобы иметь этот формат.

Страница:
...