jQuery Datetimepicker Bootstrap 4 Clear and Check Empty

Question

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.

First, I have to confirm the version I'm using, which doesn't seem to be the popular one here on StackOverflow.

https://tempusdominus.github.io/bootstrap-4/

I have also implemented some of the fixes suggested in the unminified code to correct the clear button, which are documented here:

https://github.com/tempusdominus/bootstrap-4/issues/275 https://github.com/tempusdominus/bootstrap-4/issues/34

These code fixes are allowing the widget to work as expected, save for two main functions. Here's what I need to make happen:

From a click listener or Bootstrap modal close event, CLEAR the datetimepicker. The clear method as documented does not work.
Query the state of the datetimepicker to confirm whether or not it is empty or not set.

Here is the HTML markup

<div class="input-group date" id="professional_availability_selector" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#professional_availability_selector">
    <div class="input-group-append" data-target="#professional_availability_selector" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>                   
    </div>
</div>

Here is the instance.

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

});

And here is where I trigger the clear based on the closing of a BS accordion:

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

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.

Here's my checker for emptiness (or actually several):

    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");
          }

AND here are the console outputs from the above code where the date is never empty. viewDate always returns a value.

availability: 1570005206244 
availability val: 
we got a date thurr 
is an empty string

jQuery Datetimepicker Bootstrap 4 Clear and Check Empty

0 Answers0