title: jQuery Datetimepicker Bootstrap 4 Clear and Check Empty
body: <p>After scouring the internet and StackOverflow, as well as reading the 3 or 4 different versions and iterations of this particular datetimepicker, I have a few issues with it that are preventing me from completing this one set of functionalities.</p>
  
  <p>First, I have to confirm the version I'm using, which doesn't seem to be the popular one here on StackOverflow. </p>
  
  <p><a href="https://tempusdominus.github.io/bootstrap-4/" rel="nofollow noreferrer">https://tempusdominus.github.io/bootstrap-4/</a></p>
  
  <p>I have also implemented some of the fixes suggested in the unminified code to correct the clear button, which are documented here:</p>
  
  <p><a href="https://github.com/tempusdominus/bootstrap-4/issues/275" rel="nofollow noreferrer">https://github.com/tempusdominus/bootstrap-4/issues/275</a>
  <a href="https://github.com/tempusdominus/bootstrap-4/issues/34" rel="nofollow noreferrer">https://github.com/tempusdominus/bootstrap-4/issues/34</a></p>
  
  <p><strong>These code fixes are allowing the widget to work as expected, save for two main functions. Here's what I need to make happen:</strong></p>
  
  <ol>
  <li>From a click listener or Bootstrap modal close event, CLEAR the datetimepicker. The clear method as documented does not work.</li>
  <li>Query the state of the datetimepicker to confirm whether or not it is empty or not set.</li>
  </ol>
  
  <p><strong>Here is the HTML markup</strong></p>
  
  <pre><code>&lt;div class="input-group date" id="professional_availability_selector" data-target-input="nearest"&gt;
      &lt;input type="text" class="form-control datetimepicker-input" data-target="#professional_availability_selector"&gt;
      &lt;div class="input-group-append" data-target="#professional_availability_selector" data-toggle="datetimepicker"&gt;
          &lt;div class="input-group-text"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/div&gt;                   
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here is the instance.</strong></p>
  
  <pre><code>$('#professional_availability_selector').datetimepicker({
  format: 'L',
  buttons: {showClear: true},
  useCurrent: false,
  showClear: true,
  icons: {
     time: 'fas fa-clock',
     date: 'fas fa-calendar',
     up: 'fas fa-arrow-up',
     down: 'fas fa-arrow-down',
     previous: 'fas fa-chevron-left',
     next: 'fas fa-chevron-right',
     today: 'fas fa-calendar-check-o',
     clear: 'fas fa-window-close',
     close: 'far fa-times'
  }
  </code></pre>
  
  <p>});</p>
  
  <p><strong>And here is where I trigger the clear based on the closing of a BS accordion:</strong></p>
  
  <pre><code>$(".collapse").on('hidden.bs.collapse', function(){
     console.log('The collapsible content is now hidden.');
     $(this).find("input[type=text], select").val("");
     $('#professional_availability_selector').datetimepicker("clear");
     table.ajax.reload();
  });
  </code></pre>
  
  <p>I also check for the actual value and turn it into an ISO date if it checks out as being NOT EMPTY, which it never shows as NOT EMPTY.</p>
  
  <p>Here's my checker for emptiness (or actually several):</p>
  
  <pre><code>    var availability_date = jQuery('#professional_availability_selector').datetimepicker('viewDate');
            console.log("availability: " + availability_date);
            var availability_date_val = jQuery('#professional_availability_selector').val();
            console.log("availability val: " + availability_date_val);
  
            if ($("#professional_availability_selector").datetimepicker('viewDate') == "") {
              console.log("they aint no date");
            } else console.log("we got a date thurr");
  
            if (jQuery('#professional_availability_selector').datetimepicker('viewDate') !== "") {
              var availability_date = jQuery('#professional_availability_selector').datetimepicker('viewDate');
              var isodate = new Date(availability_date);
              date = isodate.toISOString();
            } else var date = "";
  
            if (!$("#professional_availability_selector").val()) {
                console.log("is an empty string");
            } else {
                console.log("is not an empty string");
            }
  </code></pre>
  
  <p>AND here are the console outputs from the above code where the date is never empty. viewDate always returns a value.</p>
  
  <pre><code>availability: 1570005206244 
  availability val: 
  we got a date thurr 
  is an empty string
  </code></pre>