Как объединить datetimepicker и мой код jquery?

266

11 июля 2017, 21:09

Поставил datetimepicker на свой bootstrap 3 отсюда - https://eonasdan.github.io/bootstrap-datetimepicker/

Вот мой код:

Инициализация datetimepicker:

$('document').ready(function() { 
    $(function() { 
        $('#datetimepicker1').datetimepicker({ 
            pickTime: false, 
            language: 'ru', 
            format: 'YYYY-MM-DD' 
        }); 
    }); 
});

Input:

<input class="form-control" required type="text" name="date" id="datetimepicker1" value="<?=$row[date]?>">

И это работает до тех пока я не добавлю следующий код между инициализацией и INPUT'ом (тогда datetimepicker перестаёт работать). Вот так:

$('document').ready(function() { 
    $('input[name=date][type=text]').attr('disabled', 'disabled'); // поле "дата" после загрузки страницы с атрибутом disabled 
}) 
 
$('document').ready(function() { 
    $('#perenos').click(function() { // клик по чекбоксу 
        if ($('#perenos').is(':checked')) { // если выбран чекбокс "Перенос" атрибуты disabled убрать		 
            $('input[name=date]').removeAttr("disabled"); 
        } 
        if (!$('#perenos').is(':checked')) { // если не выбран чекбокс "Перенос" атрибуты disabled включить			 
            $('input[name=date][type=text]').attr('disabled', 'disabled'); 
        } 
    }) 
})

Answer 1

1) $('#datetimepicker1') можно сохранить в переменную, чтобы не искать его каждый раз.
2) Проверку чекбокса можно упростить до if-else.
3) Нет смысла использовать конструкцию $('document').ready(function() { $(function() { ... }); });

$('document').ready(function() { 
  var datetimepicker1 = $('#datetimepicker1'); 
 
  datetimepicker1.datetimepicker({ 
    locale: 'ru', 
    format: 'YYYY-MM-DD' 
  }); 
 
  $('#perenos').click(function() { // клик по чекбоксу 
    if ($(this).is(':checked')) { // если выбран чекбокс "Перенос" атрибуты disabled убрать		 
      datetimepicker1.removeAttr("disabled"); 
    } else { // если не выбран чекбокс "Перенос" атрибуты disabled включить			 
      datetimepicker1.attr('disabled', 'disabled'); 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> 
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" /> 
<input id="perenos" type="checkbox" /> 
<input class="form-control" required type="text" name="date" id="datetimepicker1" disabled value="" />