How to change format of input type="datetime-local"?

Question

I want to change the placeholder or the format of input type="datetime-local" how can I change it from mm/dd/yyyy to dd/mm/yyyy using plain javascript or html input tag?

Answer 1

Input type="datetime-local has pattern property. You can set any valid pattern.

MDN Example

pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"

<input id="party" type="datetime-local" name="partydate"
           min="2017-06-01T08:30" max="2017-06-30T16:30"
           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required>

Answer 2

please check bellow attachments. browser used date format to display in input of date, datetime, datetime-local by system date and its format. to change please change the date format of your system and restart computer i am sharing some images that help you to change date format

if you not found desire date format in date time you can use advance setting option to create your own format

in this way I have solved my problem

Answer 3

I am quite new to Vue.js. I tried something, please take a look into this...

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

I am posting this as a separate answer so that if someone wants jquery Datetimepicker they can use the first answer.

Answer 4

There is a similar example in codepen Simple Bootstrap datepicker. Using this you can show date-time in any format as per your requirement. The only issue in the above example is that the user can enter any character inside the input field since the input type is text.

I just added onkeydown="return false" so that the user will not be able to enter the data directly by clicking the input field and also added a CSS to remove the blinking cursor.

Note: Click "Full page" or use "Arrow keys" to view the entire calendar while running the code snippet.

Hope this helps!

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

you can do it this way :

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 6

Default it's showing in dd/mm/yyyy format

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