Clear Bootstrap DatePicker Value
<p>I am using the <a href="https://eonasdan.github.io/bootstrap-datetimepicker/" rel="nofollow noreferrer">Bootstrap DatePicker control</a> 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 <a href="https://stackoverflow.com/questions/22196162/clear-the-value-of-bootstrap-datepicker">SO post</a> without luck.</p>

<p>Currently, I have <a href="https://jsfiddle.net/rraz2yq3/1/" rel="nofollow noreferrer">this JSFiddle</a>. My code in question looks like the following:</p>

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

<p>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?</p>