jQuery Datetimepicker Bootstrap 4 Очистить и проверить пусто - PullRequest
Новая
       55

jQuery Datetimepicker Bootstrap 4 Очистить и проверить пусто

0 голосов
/ 02 октября 2019

После изучения Интернета и StackOverflow, а также прочтения 3 или 4 различных версий и итераций этого конкретного средства выбора даты и времени у меня возникло несколько проблем, которые мешают мне выполнить этот набор функций.

Во-первых, я должен подтвердить версию, которую я использую, которая не кажется популярной здесь, на StackOverflow.

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

Я также реализовал некоторые исправления, предложенные в унифицированном коде для исправления кнопки очистки, которые описаны здесь:

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

Эти исправления кода позволяют виджету работать должным образом, за исключением двух основных функций. Вот что мне нужно, чтобы это произошло:

  1. От слушателя щелчка или события модального закрытия Bootstrap CLEAR datetimepicker. Метод очистки, описанный в документации, не работает.
  2. Запрос состояния DatePicker для подтверждения, пуст он или нет.

Вот разметка HTML

<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>

Вот пример. 

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

});

А вот где я запускаюклир, основанный на закрытии аккордеона BS: 

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

Я также проверяю фактическое значение и превращаю его в дату ISO, если она считается НЕ ПУСТОЙ, которую он никогда не показываеткак НЕ ПУСТО.

Вот мой чек на пустоту (или даже несколько): 

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

И вот консольные выходы из приведенного выше кода, где дата никогда не бывает пустой. viewDate всегда возвращает значение. 

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