Есть ли способ изменить формат ввода type = "date"? - PullRequest
664 голосов
/ 10 сентября 2011

Я работаю с элементами HTML5 на моей веб-странице. По умолчанию ввод type="date" показывает дату как YYYY-MM-DD.

Вопрос в том, можно ли изменить его формат на что-то вроде: DD-MM-YYYY?

Ответы [ 13 ]

2 голосов
/ 04 июня 2014

Невозможно изменить веб-браузер, использующий формат даты по умолчанию на компьютере или мобильном телефоне пользователя. Но если вы можете использовать jquery и jquery UI, есть средство выбора даты, которое можно проектировать и отображать в любом формате по желанию разработчика. ссылка на средство выбора даты jquery UI на этой странице http://jqueryui.com/datepicker/ вы можете найти демо, а также код и документацию или ссылку на документацию

Редактировать: -Я считаю, что Chrome использует языковые настройки, которые по умолчанию равны системным настройкам, но пользователь может изменить их, но разработчик не может заставить пользователей сделать это, поэтому вы должны использовать другие решения js, как я сказал, что вы можете поиск в Интернете с помощью таких запросов, как сборщик дат javascript или сборщик дат jquery

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

Я знаю, что это старая запись, но она появилась в качестве первого предложения в поиске Google, короткий ответ нет, рекомендуемый ответ пользователю пользовательский пикер даты, правильный ответ, который я использую, - использование текстового поля для имитации ввода даты и выполнения любых действий.формат, который вы хотите, вот код

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

0 голосов
/ 26 мая 2018

Браузеры получают формат ввода даты из системного формата даты пользователя.

(протестировано в поддерживаемых браузерах, Chrome, Edge.)

Поскольку стандарт не установленопределено спецификациями на данный момент, чтобы изменить стиль контроля даты, его невозможно реализовать в браузерах.

Однако, такое поведение получения формата даты из системных настроек лучше, и я настоятельнопредложить, мы не должны пытаться переопределить это.Причина в том, что пользователи увидят формат ввода даты в том же формате, который они настроили в системе / устройстве и который им удобен или соответствует их языку.

Помните, что это просто формат пользовательского интерфейса на экране, который видят пользователи, в вашем javascript / backend вы всегда можете сохранить желаемый формат.

См. Страницу разработчиков Googleна том же.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...