如何更改输入类型=“datetime-local”的格式？

Question

我想更改占位符或输入的格式 type="datetime-local" 如何使用纯 javascript 或 html 输入标签将其从 mm/dd/yyyy 更改为 dd/mm/yyyy？

Answer 1

我对 Vue.js 还是很陌生。我试过了，请看看这个...

// Initialize as global component
Vue.component('date-picker', VueBootstrapDatetimePicker);

// Using font-awesome 5 icons
$.extend(true, $.fn.datetimepicker.defaults, {
  icons: {
    time: 'far fa-clock',
    date: 'far fa-calendar',
    up: 'fas fa-arrow-up',
    down: 'fas fa-arrow-down',
    previous: 'fas fa-chevron-left',
    next: 'fas fa-chevron-right',
    today: 'fas fa-calendar-check',
    clear: 'far fa-trash-alt',
    close: 'far fa-times-circle'
  }
});

new Vue({
  el: '#app',
  data: {
    date: null,
    options: {
      // https://momentjs.com/docs/#/displaying/
      format: 'DD/MM/YYYY hh:mm A',
      useCurrent: false,
      showClear: true,
      showClose: true,
    }
  },
});

<link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free-webfonts@1.0.9/css/fontawesome.css">
<link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free-webfonts@1.0.9/css/fa-solid.css">
<link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free-webfonts@1.0.9/css/fa-regular.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/pc-bootstrap4-datetimepicker@4.17.50/build/css/bootstrap-datetimepicker.min.css">

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/moment@2.18.1/min/moment.min.js"></script>
<script src="https://unpkg.com/pc-bootstrap4-datetimepicker@4.17.50/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://unpkg.com/vue@2.5/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-bootstrap-datetimepicker@5"></script>


<div id="app" class="container">
  <div class="row">
    <div class="col-md-12">
      <h1 class="h3">
        Vue bootstrap 4 date-time picker
      </h1>
      <date-picker name="date" v-model="date" :config="options" onkeydown="return false"></date-picker>
    </div>
  </div>
</div>

我将此作为单独的答案发布，以便如果有人想要 jquery Datetimepicker，他们可以使用第一个答案。

Answer 2

codepen Simple Bootstrap datepicker 中有一个类似的例子。 使用它，您可以根据您的要求以任何格式显示日期时间。 上述示例中的唯一问题是用户可以在输入字段中输入任何字符，因为输入类型是 text。

我刚刚添加了 onkeydown="return false" 这样用户将无法通过单击输入字段直接输入数据，并且还添加了一个 CSS 到移除闪烁的光标。

注意：运行代码sn-p时点击“整页”或使用“方向键”查看整个日历。

希望这会有所帮助！

$(function() {
  var bindDatePicker = function() {
    $(".date").datetimepicker({
      format: 'DD/MM/YYYY hh:mm A',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down"
      }
    }).find('input:first').on("blur", function() {
      // check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
      // update the format if it's yyyy-mm-dd
      var date = parseDate($(this).val());

      if (!isValidDate(date)) {
        //create date based on momentjs (we have that)
        date = moment().format('DD/MM/YYYY hh:mm A');
      }

      $(this).val(date);
    });
  }

  var isValidDate = function(value, format) {
    format = format || false;
    // lets parse the date to the best of our knowledge
    if (format) {
      value = parseDate(value);
    }

    var timestamp = Date.parse(value);

    return isNaN(timestamp) == false;
  }

  var parseDate = function(value) {
    var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
    if (m)
      value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);

    return value;
  }

  bindDatePicker();
});

input[type="text"]{
    color : transparent;
    text-shadow : 0 0 0 #000;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js
"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>


<div class="container">
  <div class="row">
    Date formats: yyyy-mm-dd, yyyymmdd, dd-mm-yyyy, dd/mm/yyyy, ddmmyyyyy
  </div>
  <br />
  <div class="row">
    <div class='col-sm-3'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" placeholder="dd/mm/yyyy --:-- --" onkeydown="return false" />
          <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

你可以这样做：

function nowAsDuration(){
    return moment.duration({
        hours:   moment().hour(),
        minutes: moment().minute(),
        seconds: moment().second()
    });
}


$("input").on("change", function() {
    var a = moment(this.value);
    var b = nowAsDuration();
    var c = a.add(b);
    
        
    this.setAttribute("my-date", c.format( this.getAttribute("my-date-format") )
    )
}).trigger("change")

input {
    position: relative;
    width: 250px; height: 20px;
    color: white;
}

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

<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" my-date="" my-date-format="DD/MM/YYYY, hh:mm:ss" value="2015-08-09">

Answer 4

默认以 dd/mm/yyyy 格式显示

<input type="datetime-local" name="date">