Як встановити формат дати в тезі введення HTML?


105

Мені цікаво, чи можна встановити формат дати в html- <input type="date"></input>тезі ... В даний час це yyyy-mm-dd, тоді як мені це потрібно у форматі dd-mm-yyyy


3
Чи не можливий дублікат Вказання значення виходу типу введення HTML5 = дата? ? Я б сказав, це питання тут краще задати, ніж старіше, але на це старше є досить гарна відповідь.
Арсен7


Мої налаштування країни - голландські, а в Chrome він відображає DD-MM-YYYY. Здається, це залежить від налаштувань Windows клієнта, що використовує веб-сайт.
dark_passages

Відповіді:


11

Ви цього не робите.

По-перше, ваше питання неоднозначне - ви маєте на увазі формат, у якому він відображається користувачеві, або формат, у якому він передається на веб-сервер?

Якщо ви маєте на увазі формат, у якому він відображається користувачеві, то це вниз до інтерфейсу для кінцевого користувача, а не до того, що ви вказали в HTML. Зазвичай, я б очікував, що він базується на форматі дати, який він встановлений в локальних налаштуваннях операційної системи. Немає сенсу намагатися замінити його на власний бажаний формат, оскільки формат, в якому він відображається, є (як правило) правильним для мови користувача та формату, який користувач використовує для запису / розуміння дат.

Якщо ви маєте на увазі формат, у якому він передається на сервер, ви намагаєтеся виправити неправильну проблему. Що потрібно зробити, це запрограмувати код на стороні сервера, щоб він приймав дати у форматі "yyyy-mm-dd".


На жаль, ваш другий коментар не зовсім відповідає дійсності. Деякі браузери, як-от Chrome і Opera, принаймні поважають порядок сутностей, хоча нічого іншого. Наприклад, у моїх налаштуваннях локальної ОС вказано, що перший день серпня цього року повинен бути коротким , але 8 серпня 2016 року , але навіть Chrome та Opera показують 01.08.2016 . Інші веб-переглядачі, як-от Safari та Firefox (принаймні в OS X), повністю ігнорують налаштування ОС і завжди показують 2016-08-16, незалежно від цього. На сайті, де користувачі можуть встановлювати свої власні налаштування дати, це, безумовно, має сенс змінити це.
Jaus Bahs Jacquet

(Ігноруйте замітку про Firefox та Safari… Я втомився. Жоден браузер взагалі не підтримує тип дати, тому вони просто показують базовий формат значення, який у випадку мого поточного коду - YYYY-MM-DD .)
Янус Бас Жак

Чи більшість людей запитують, як змінити формат дати відображення / введення, бажаючи, щоб користувачі могли встановити власні переваги або надати власний бажаний формат дат у всьому світі? Останнє - це те, що ніхто не повинен робити, як я вже говорив, але ви можете в будь-якому випадку сперечатися, чи підходить перший. Але це було б презентаційне налаштування, тому поза сферою HTML.
Стюарт

Проблема в тому, що це презентаційна установка, яку неможливо встановити . Налаштування презентацій взагалі належать до CSS, але немає можливості змінити це в CSS (або деінде). Крім того, навіть сама специфікація HTML не вільна від презентаційних налаштувань. Наприклад, у розділі input[type=password]йдеться про те, що "користувальницький агент повинен затіняти значення, щоб люди, окрім користувача, не могли його бачити", що є такою ж презентацією, як і те, що користувачеві агент повинен дати певну дату.
Jaus Bahs Jacquet

1
Деякі кажуть, що це добре , що її не можна встановити, оскільки це заважає веб-майстрам наносити свої власні бажані формати дат у світі. Але введення пароля змусило мене задуматися. У багатьох місцях специфікація HTML дає презентаційні рекомендації, які по суті є рекомендаціями щодо таблиць стилів браузера за замовчуванням. Різниця тут полягає в тому, що, здається, не існує властивості CSS для цього конкретного презентаційного аспекту.
Стюарт

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

Код Javascript:

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, щоб розмістити прозорий контроль за датою регулярного введення
Джордж Мауер

Дякую за вашу відповідь, якщо у вас є якесь посилання або код для цього, мені потрібно оновити
ashish bhatt

Це чудовий варіант.
Діллон Бернетт

Я думаю, він запитує, чи можливо це за допомогою HTML (на основі запитання), а не CSS чи Javascript.
Шизукура

6

Якщо ви використовуєте jQuery, ось приємний простий метод

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

Або є старий традиційний спосіб:

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

4

Чому б не використовувати контроль дати html5 таким, яким він є, з іншими атрибутами, які дозволяють йому працювати нормально у браузерах, що підтримують тип дати, і все ще працює в інших браузерах, таких як firefox, який ще не підтримує тип дати

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

<pre> <type type = "text" name = "input1" placeholder = "YYYY-MM-DD" необхідний шаблон = "[0-9] {4} - [0-9] {2} - [0-9 ] {2} "title =" Введіть дату в цей формат YYYY-MM-DD "/> </pre>
Пол IE

8
Вимога чітко була, я цитую - "мені це потрібно у форматі dd-mm-yyyy". Як це допомагає?
Harijs Krūtainis

1
не працює з Firefox. Цей html показує вхід із заповненням mm / dd / yyyy. У моїх вікнах і в моїй firefox обидві мови є голландською мовою. Регіональні налаштування Windows показують коротку дату: 30-11-2018.
Roland


1

Я цього точно не знаю, але думаю, що цим повинен займатися браузер на основі налаштувань дати / часу користувача. Спробуйте налаштувати комп'ютер, щоб він відображав дати у такому форматі


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

3
Дякуємо за цей фрагмент коду, який може надати негайну допомогу. Правильне пояснення значно покращило б його навчальну цінність, показавши, чому це хороше рішення проблеми, та зробило б її кориснішою для майбутніх читачів із подібними, але не однаковими питаннями. Будь ласка, відредагуйте свою відповідь, щоб додати пояснення та вказати, які обмеження та припущення застосовуються.
Toby Speight

1

Я зробив багато досліджень, і я не думаю, що це може змусити формат <input type="date"> . Браузер вибирає локальний формат, і залежно від налаштувань користувача, якщо мова користувача англійською мовою, дата відображатиметься в англійському форматі (мм / дд / ггр).

На мою думку, найкраще рішення - використовувати плагін для управління дисплеєм.

Jquery DatePicker здається хорошим варіантом, оскільки ви можете примусити локалізацію , формат дати ...


1

Я придумав дещо іншу відповідь, ніж усе вище, що я прочитав.

У моєму рішенні використовується невеликий трохи JavaScript та html-введення.

Дата, прийнята введенням, призводить до того, що рядок відформатований як "yyyy-mm-dd". Ми можемо розділити його та розмістити належним чином як новий 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 []", щоб створити свій рядок.

Майте на увазі, що деякі способи введення дати у "нову дату ()" дають несподіваний результат. (тобто - на один день позаду)


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, дуже важливо відформатувати його як код. Якщо ви не відформатовані як частина сторінки, а ваша відповідь не схожа на відповідь. Якщо ви не знаєте, як їх форматувати, у довідковому центрі є приємний довідник
Зої,

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- якщо ви будете використовувати цей код для введення кількох дат на своїй сторінці, будь ласка, змініть ідентифікатор "xTime" введення тексту в обох функціях виклику та самого введення на щось інше, і, звичайно, використовуйте ім'я потрібного вводу для подати форму.

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

вам не потрібно встановлювати його тип на сьогоднішній день. для дату вибору він працюватиме без дати. Спробуйте, сподіваємось, це вирішить вашу проблему.
Мухаммед Вакас

-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 ​​або будь-якому іншому, щоб мати цей формат.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.