How can I clear input text on datetimepicker?

Question

Demo and full code like this :

https://jsfiddle.net/oscar11/yfjvd200/

I want the datepicker and timepicker not filled when loaded the first time. I want the datepicker or timepicker to filled when the user clicks on the input text of each. Eg user click on timepicker text input then time will be filled

I try use this :

  $('#datepicker').val("");
  $('#timepicker').val("");

But it does not work

How can I do it?

Answer 1

You found the right trick!

$('#datepicker').val("");
$('#timepicker').val("");

But you are not doing it at the right moment. Place that AFTER the pickers have been instanciated.

To fill the time on focus, add this .on() to timepicker:

$('#timepicker').datetimepicker({
  minDate: moment().add(300, 'm'),
})
  .on('focus', function(e){
  if( $(this).val() == "" ){
    $(this).data("DateTimePicker").minDate(moment().add(300, 'm'));
  }
});

Fiddle

Answer 2

You just need to write these lines to end of your function :

$('#datepicker').val("");
$('#timepicker').val("");

You can use this code :

$(function () {
  console.clear();

  $('#datepicker').datetimepicker({
    minDate: moment().add(300, 'm').startOf("day")
  })
    .val(moment().add(300, 'm').format("DD-MM-YYYY"))   // To set correct "valid" date from start

    .on('dp.change', function(e){
    var now = moment().format("X");
    //console.log(e.date.format("X"));
    //console.log(now);

    // Comparing selected date (moment object) in milliseconds
    if(e.date.format("X")+(300*60*1000) > now ){
      console.log("above 5 hours, unlocking time.");
      $('#timepicker').data("DateTimePicker").minDate(false);
    }else{
      console.log("below 5 hours, locking time (and probably resetting the value to min...)");
      $('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));
    }

  });

  $('#timepicker').datetimepicker({
    minDate: moment().add(300, 'm'),
  });

  $('#datepicker').val("");
  $('#timepicker').val("");
});

Answer 3

Have a look at this fiddle https://jsfiddle.net/lamp03/yfjvd200/9/ . I have commented some lines

$(function () {
  //$('#datepicker').val("");
  //$('#timepicker').val("");
  console.clear();

  $('#datepicker').datetimepicker({
    minDate: moment().add(300, 'm').startOf("day")
  })
    //.val(moment().add(300, 'm').format("DD-MM-YYYY"))   // To set correct "valid" date from start

    .on('dp.change', function(e){
    var now = moment().format("X");
    //console.log(e.date.format("X"));
    //console.log(now);

    // Comparing selected date (moment object) in milliseconds
    if(e.date.format("X")+(300*60*1000) > now ){
      console.log("above 5 hours, unlocking time.");
      $('#timepicker').data("DateTimePicker").minDate(false);
    }else{
      console.log("below 5 hours, locking time (and probably resetting the value to min...)");
      $('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));
    }

  });

  $('#timepicker').datetimepicker({
    //minDate: moment().add(300, 'm'),
  }).on('dp.change', function(e){ $('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));});
});