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

Question

像这样的演示和完整代码：

我希望日期选择器和时间选择器在第一次加载时不被填充。我希望在用户单击每个输入文本时填充日期选择器或时间选择器。例如用户点击时间选择器文本输入然后时间将被填充

我尝试使用这个：

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

Fiddle

Answer 2

看看这个fiddlehttps://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'));});
});

Answer 3

您只需将这些行写到函数的末尾即可：

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

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

How can I clear input text on datetimepicker?

javascript

jquery

datetimepicker

twitter-bootstrap