Введите формат даты с дд / мм / гггг в поле ввода - PullRequest
0 голосов
/ 26 мая 2018

У меня есть классический ввод даты в формате HTML: <input type="date" name="dto" id="date_timepicker_end"> enter image description here

Теперь мне нужно изменить этот формат на дд / мм / гггг Я знаю, что не могу изменить это в html .

Когда я добавляю указатель даты jQuery, я просто получаю пустую форму ввода, где вы можете ввести любое число:

enter image description here

Мне нужно, чтобы ввод был таким же, как ввод HTML , когда пользователь нажимает на ввод и может просто изменить значение в соответствии счто он нажал.Я не хочу, чтобы он мог написать любое случайное число.

Также обратите внимание, что это все пользовательский код в теме WordPress, поэтому у меня есть jquery и мой пользовательский javascript и css.Я не могу добавить библиотеки, такие как moment.js и т. Д. ...

Как лучше всего решить эту проблему?Я знаю, что об этом спрашивали много раз, но ни один из этих методов мне не подходит, потому что мне нужно, чтобы поле ввода было похоже на обычное поле ввода HTML-данных , а не пустой ввод, dd/ мм / гггг вместо если мм / дд / гггг .

jsfiddle: https://jsfiddle.net/t4zrrvgL/

Ответы [ 4 ]

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

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

<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

Добавьте атрибут readonly в свой HTML-тег.Это ограничивает ввод данных пользователем.

<input type="text" name="dto" id="date_timepicker_end" readonly>

Поскольку вы используете jQuery datepicker, у него есть опция, позволяющая указать желаемый формат даты.

 $("#date_timepicker_end").datepicker()
 {
    "dateFormat" : "dd-mm-yyyy" //any valid format that you want to have
 });

Надеюсь, это поможет !!

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

Как вы уже знаете, вы не можете изменить формат значения в input type="date".

. input type="date" использует локализованный формат отображения,
, но его значение отформатировано так: «ГГГГ-ММ-ДД ”.
(Док .: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)

Вместо того, чтобы пытаться изменить или использовать шаблон на input datepicker,
Я пытался использоватьобычный input type="date" для работы с datepicker.

У datepicker есть опция dateFormat.
Кажется, что «yy-mm-dd» соответствует формату, требуемому input type="date".
Используя это, я легко получил локализованный datepicker:

// Use datepicker on the date inputs
$("input[type=date]").datepicker({
  dateFormat: 'yy-mm-dd',
  onSelect: function(dateText, inst) {
    $(inst).val(dateText); // Write the value in the input
  }
});

// Code below to avoid the classic date-picker
$("input[type=date]").on('click', function() {
  return false;
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="date">

Надеюсь, это поможет.

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

вы можете изменить тег даты на:

<input type="date" id="myDate" max="2222-05-26">

Это не позволит пользователям вводить более 4 символов в поле года.Также не имеет значения, что они вводят, вы всегда можете выполнить клиент-серверные проверки.

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