Как изменить формат ввода type = "datetime-local"?

Question

Я хочу изменить местозаполнитель или формат ввода type = "datetime-local", как я могу изменить его с mm/dd/yyyy на dd/mm/yyyy, используя обычный тег ввода javascript или html?

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

вы можете сделать это следующим образом:

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 3

Аналогичный пример есть в codepen Simple Bootstrap datepicker . Используя это вы можете показать дату и время в любом формате в соответствии с вашими требованиями. Единственная проблема в приведенном выше примере заключается в том, что пользователь может ввести любой символ в поле ввода, поскольку тип ввода - text .

Я только что добавил onkeydown = "return false" , чтобы пользователь не смог ввести данные напрямую, щелкнув поле ввода, а также добавил CSS для удаления мигающего курсора.

Примечание : нажмите «Полная страница» или используйте «клавиши со стрелками» для просмотра всего календаря во время выполнения фрагмента кода.

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

$(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 4

По умолчанию отображается в формате дд / мм / гггг

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