Введите формат даты с дд/мм/гггг в поле ввода

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

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

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

введите здесь описание изображения

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

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

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

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


javascript jquery date
person IkePr    schedule 26.05.2018    source источник
comment
HI Пожалуйста, приготовьте скрипку. так что это позволит нам легко решить вашу проблему быстро.   -  person biswajit-rout    schedule 26.05.2018
comment
@biswajit-rout Добавлено   -  person IkePr    schedule 26.05.2018
comment
Возможный дубликат Как установить формат даты при вводе даты HTML тег?   -  person Oliver Ni    schedule 26.05.2018
comment
Возможный дубликат Есть ли способ изменить тип ввода = формат даты?   -  person Rahul R.    schedule 26.05.2018
comment
пожалуйста, обратитесь к моему ответу stackoverflow.com/a/50546315/1421196   -  person Rahul R.    schedule 26.05.2018

Ответы (4)


arrow_upward
3
arrow_downward

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

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

person Takit Isy    schedule 26.05.2018

arrow_upward
0
arrow_downward

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

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

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

person RavianXReaver    schedule 26.05.2018

arrow_upward
0
arrow_downward

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

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

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

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

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

person Kgn-web    schedule 26.05.2018

arrow_upward
0
arrow_downward

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

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

person shady    schedule 21.09.2018