在输入字段中输入日期格式为dd/mm/yyyy [英] Input date format with dd/mm/yyyy in the input field

问题描述

我有一个经典的HTML日期输入:<输入type ="date" name ="dto" id ="date_timepicker_end">

I have a classic HTML date input: <input type="date" name="dto" id="date_timepicker_end">

现在，我需要将此格式更改为 dd/mm/yyyy ，并且我知道我无法在html中更改该格式.

Now I need to change this format to be dd/mm/yyyy, and I know I can't change that in html.

当我添加jQuery datepicker时，我只得到一个空白的输入表单，您可以在其中输入所需的任何数字:

When I add the jQuery datepicker I just get a blank input form where you can type any number you want:

我需要输入像HTML输入一样，在该输入中，用户单击输入，然后可以根据其单击的内容更改值.我不希望他能写任何随机数.

I need the input to be just like the HTML input, where the user clicks on the input and can just change the value according to what he clicked. I don't want him to be able to write any random number.

还请注意，这都是wordpress主题中的所有自定义代码，因此我有jquery以及我的自定义javascript和css.我无法添加诸如moment.js之类的库...

Also note, this is all custom code in a wordpress theme, so I have jquery and my custom javascript and css. I can't add libraries like moment.js and so on...

此问题的最佳解决方案是什么?我知道已经问过很多次了，但是这些方法都不适合我，因为我需要输入字段像普通的HTML输入日期字段一样，而不是空输入，dd/mm/yyyy代替，如果是mm/dd/yyyy .

What is the best solution for this problem ? I know it has been asked a lot of times, but none of those methods work me for because I need the input field to be like a normal HTML input date field, not an empty input, dd/mm/yyyy instead if mm/dd/yyyy.

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

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

推荐答案

您已经知道，您不能在 input type ="date" 中更改值格式.

As you already know, you can't change the value format in an input type="date".

输入类型="date" 使用本地化的显示格式，
但其值的格式如下:"YYYY-MM-DD".
(文档: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date )

The input type="date" uses a localized displaying format,
but its value is formatted like this: "YYYY-MM-DD".
(Doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)

而不是尝试修改或使用 datepicker 的 input 上的模式，
我试图使用常规的 input type ="date" 与 datepicker 一起使用.

Instead of trying to modify or use a pattern on the input of the datepicker,
I tried to use the regular input type="date" to work with the datepicker.

datepicker 具有 dateFormat 选项.
看来"yy-mm-dd"与 input type ="date" 所需的格式匹配.
使用它，我以一种简单的方式结束了本地化的 datepicker :

The datepicker has got a dateFormat option.
It seems that "yy-mm-dd" matches the format required by the input type="date".
Using that, I ended-up with a localized datepicker in an easy way:

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

希望有帮助.

这篇关于在输入字段中输入日期格式为dd/mm/yyyy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！