如何清除datetimepicker上的輸入文本？

Question

演示和完整代碼如下：

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

我希望第一次加載時不填充datepicker和timepicker。 我希望當用戶單擊每個輸入文本時，填充日期選擇器或時間選擇器。 例如，用戶單擊時間選擇器文本輸入，然后時間將被填滿

我嘗試使用這個：

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

但這不起作用

我該怎么做？

Answer 1

您找到了正確的把戲！

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

但是您沒有在正確的時機這樣做。 放置拾取器之后，將其放置。

為了使時間集中，請將此.on()添加到時間選擇器中：

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

小提琴

Answer 2

您只需要在功能末尾寫這些行：

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

您可以使用以下代碼：

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

看看這個小提琴https://jsfiddle.net/lamp03/yfjvd200/9/ 。 我評論了一些話

$(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'));});
});