Clear Bootstrap DatePicker Value

Question

I am using the Bootstrap DatePicker control in my app. I am trying to figure out how to clear the value of the field. I feel kind of dumb asking about this. To be honest, it seems like it should be straightforward. But, I've been unsuccessful. I have tried the approaches recommend in this SO post without luck.

Currently, I have this JSFiddle. My code in question looks like the following:

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

It's like the functions in the control don't work. Or, the documentation is incorrect. As the fiddle shows, my "Get Date" function is not working either. That's why I feel like something is really wrong. Am I missing something or misunderstanding something?

Answer 1

If #birthday contains the datepicker, do this and it will work:

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

You need to call clear on the $('#birthday').data("DateTimePicker") object. Function calls are illustrated here.

To get the date, do this:

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