Question

我在我的应用中使用Bootstrap DatePicker control。我试图弄清楚如何清除该领域的价值。我有点愚蠢地问这个问题。说实话，它似乎应该是直截了当的。但是，我没有成功。我已经尝试了这个SO post推荐的方法而没有运气。

目前，我有this JSFiddle。我的代码如下所示：

$(function() {
  $('#birthday').datetimepicker({ showTodayButton: true });
  $('#getDateButton').on('click', function() {
    var selectedDate = $('#birthday').data('date');
    if (selectedDate) {
      selectedDate = selectedDate.format('MM-DD-YYYY');
    }
    $('#formattedDate').html(selectedDate);
  });

  $('#clearButton').on('click', function() {
    alert('Clear the value in the "birthday" field...');
    $('#birthday').data('clear');
    // what now?
  });
});

它类似于控件中的功能无法正常工作。或者，文档不正确。正如小提琴所示，我的＆＃34;获取日期＆＃34;功能也不起作用。这就是为什么我觉得某事真的错了。我错过了什么或误解了什么吗？

Answer 1

如果#birthday包含datepicker，请执行以下操作：

$('#clearButton').on('click', function() {
    alert('Clear the value in the "birthday" field...');
    $('#birthday').data("DateTimePicker").clear();
  });

您需要在$('#birthday').data("DateTimePicker")对象上调用clear。函数调用如here所示。

要获取日期，请执行以下操作：

$('#getDateButton').on('click', function() {
    var selectedDate = $('#birthday').data('DateTimePicker').date();

    if (selectedDate) {
      selectedDate = selectedDate.format('MM-DD-YYYY');
      console.log("selected date "+ selectedDate);
    }
    $('#formattedDate').html(selectedDate);
  });

Answer 2

似乎可以使用此code：

operator+

Answer 3

这没关系 $('#birthday').data("DateTimePicker").clear();

你可以看到这个http://eonasdan.github.io/bootstrap-datetimepicker/Functions/ http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#clear

注意所有功能都可通过数据属性访问，例如$（＆＃39;＃的DateTimePicker＆＃39）的数据。（＆＃34;的DateTimePicker＆＃34）。FUNCTION（）

Answer 4

第一步：添加导入所需的引用：

import { bla-bla-bla, NgbInputDatepicker } from '@ng-bootstrap/ng-bootstrap';

第 2 步：将其引用为 ViewChild：

@ViewChild('lastStartMinDatepicker') lastStartMinDatepicker: NgbInputDatepicker;

考虑到您在标记中有这样的内容：

<input
   #lastStartMinDatepicker="ngbDatepicker"
   #thisElement="ngModel"
   ngbDatepicker
   (click)="lastStartMinDatepicker.toggle()"
   class="form-control"
   [class.is-invalid]="thisElement.invalid && thisElement.touched"
   [(ngModel)]="lastStartMinPicker"
   [ngModelOptions]="{ standalone: true }"
   placeholder="Date From"
   readonly
/>

第 3 步：从中删除值：

this.lastStartMinDatepicker.writeValue(null);

第 4 步：享受 :)

清除Bootstrap DatePicker值

4 个答案: