Как настроить выбор даты с помощью JQuery 3.3.1 и Bootstrap 3.3.7? - PullRequest
Новая
       26

Как настроить выбор даты с помощью JQuery 3.3.1 и Bootstrap 3.3.7?

0 голосов
/ 31 мая 2018

Я должен установить указатель даты для полей ввода в нескольких различных формах.В прошлом я использовал JQuery Date-Picker, но для этого проекта я использую Bootstrap 3, так что есть другой метод, который доступен.Вот пример, который у меня есть: 

$(document).ready(function() {
  $('.datepick').datetimepicker();
});
<!---*** Start: JQuery 3.3.1 version. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<script language="javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">

<div class="form-group required">
  <div class="input-group">
    <input type="text" class="form-control datepick" name="frmSaveOffice_startdt" id="frmSaveOffice_startdt" required>
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

Вы можете видеть, что приведенный выше фрагмент работает, но есть несколько вещей, которые я хотел бы изменить.Сначала я бы хотел, чтобы поле ввода было readonly.Пользователь должен иметь возможность щелкнуть значок календаря и затем выбрать date only.Мне не нужно время рядом с датой.Нажатие на значок не позволит пользователю ввести то, что он хочет.Мне интересно, есть ли способ добиться этого с помощью выбора даты в начальной загрузке и jquery?

1 Ответ

0 голосов
/ 01 июня 2018

Вы должны переместить класс datepick с <input> на <div> с классом input-group, чтобы позволить пользователю открыть сборщик, щелкнув значок календаря.

Затем необходимодобавьте свойство readonly ко входу и установите для параметра ignoreReadonly значение true.

Используйте параметр format для настройки формата даты и скрыть указатель времени, как сказано в документации:

См. документацию моментов для правильных форматов.Формат также определяет, какие компоненты отображаются, например, MM/dd/YYYY не будет отображать указатель времени.

Вот пример сэмпла: 

$(document).ready(function() {
  $('.datepick').datetimepicker({
    format: 'L',
    ignoreReadonly: true
  });
});
<!---*** Start: JQuery 3.3.1 version. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<script language="javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">

<div class="form-group required">
  <div class="input-group datepick">
    <input type="text" class="form-control" name="frmSaveOffice_startdt" id="frmSaveOffice_startdt" required readonly>
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>
...