如何在HTML输入中将日期格式更改为dd / mm / yyyy

时间:2018-09-01 10:33:25

标签: html html5

我想在输入字段中将日期格式mm / dd / yyyy更改为dd / mm / yyyy。

我的输入字段

<input placeholder="custom date" type="date"  name="tckt_issue_date">

我该怎么做。

4 个答案:

答案 0 :(得分:0)

您需要在代码中添加一些javascript,请阅读以下注释

https://stackoverflow.com/a/31162426/6353996

答案 1 :(得分:0)

除非使用CSS和js,否则无法更改默认日期类型输入

$("input").on("change", function() {
        this.setAttribute(
            "data-date",
            moment(this.value, "YYYY-MM-DD")
            .format( this.getAttribute("data-date-format") )
        )
    }).trigger("change")
input {
        position: relative;
        width: 150px; height: 20px;
        color: white;
    }

    input:before {
        position: absolute;
        top: 3px; left: 3px;
        content: attr(data-date);
        display: inline-block;
        color: black;
    }

    input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
        display: none;
    }

    input::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 3px;
        right: 0;
        color: black;
        opacity: 1;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
    <input type="date" data-date="" data-date-format="DD/MM/YYYY" value="2020-08-29">

答案 2 :(得分:-1)

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

答案 3 :(得分:-1)

没有本机的方法,但这是我的HTML + JS解决方案:

<script>
function DDMMYYYY(value, event) {
  let newValue = value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');

  const dayOrMonth = (index) => index % 2 === 1 && index < 4;

  // on delete key.  
  if (!event.data) {
    return value;
  }

  return newValue.split('').map((v, i) => dayOrMonth(i) ? v + '/' : v).join('');;
}
</script>

<input type="tel" maxlength="10" placeholder="dd/mm/yyyy"
    oninput="this.value = DDMMYYYY(this.value, event)" />

  • 它使用本地HTML“ oninput”方法,因此用户看不到任何闪烁的东西。
  • 使用“ type = tel”可在任何移动设备上打开数字键盘。
  • 基本上是在日期和月份之后添加'/',并删除其他所有内容。

希望它将对以后的人有所帮助:)