Очистить значение Bootstrap DatePicker

Я использую элемент управления Bootstrap DatePicker в своем приложении. Я пытаюсь понять, как очистить значение поля. Я чувствую себя немного глупо, спрашивая об этом. Честно говоря, кажется, что это должно быть просто. Но я потерпел неудачу. Я безуспешно пробовал подходы, рекомендованные в этом SO post.

В настоящее время у меня есть это 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?
  });
});

Как будто функции в контроле не работают. Или документация неверная. Как показывает скрипка, моя функция «Получить дату» тоже не работает. Вот почему я чувствую, что что-то действительно не так. Я что-то упускаю или что-то неправильно понимаю?


javascript datepicker jquery
person Some User    schedule 15.05.2016    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Если #birthday содержит средство выбора даты, сделайте это, и оно будет работать:

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

Вам нужно вызвать clear для объекта $('#birthday').data("DateTimePicker"). Вызовы функций проиллюстрированы здесь.

Чтобы получить дату, сделайте следующее:

$('#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);
  });
person Chintan    schedule 15.05.2016
comment
@ZachTempleton добавил информацию о том, как получить дату - person Chintan; 15.05.2016
comment
Спасибо за вашу помощь. Я чувствую себя довольно глупо :). Я делал это: $('#birthday').data('date') и это $('#birthday').data('clear') я даже ходил в: $('#birthday').data('clear').FUNCTION() - person Some User; 15.05.2016
comment
Или @ZachTempleton, вы можете просто сделать это: $('#birthday').datepicker('setStartDate', null); - person chitra; 28.04.2017

arrow_upward
0
arrow_downward

Кажется, работает с этим кодом:

$('#clearButton').on('click', function() {
    alert('Clear the value in the "birthday" field...');
    $('#birthdayDate').val('');
    // what now?
})
person Ciprianis    schedule 15.05.2016

arrow_upward
0
arrow_downward

это нормально $('#birthday').data("DateTimePicker").clear();

вы можете увидеть это http://eonasdan.github.io/bootstrap-datetimepicker/Functions/ http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#clear

Примечание. Доступ ко всем функциям осуществляется через атрибут данных, например. $('#datetimepicker').данные("DateTimePicker").ФУНКЦИЯ()

person seay    schedule 15.05.2016
comment
Ух ты! Я чувствую себя очень глупо. Я пытался $('#datetimepicker').data("clear").FUNCTION(). Спасибо за вашу помощь. - person Some User; 15.05.2016

arrow_upward
0
arrow_downward

Шаг 1: добавьте необходимую ссылку для импорта:

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: наслаждайтесь :)

person Alexander    schedule 20.01.2021