Можно ли использовать атрибуты данных HTML5 для инициализации средства выбора даты Bootstrap 3?

На данный момент мы используем datetimepicker полумодульным способом, поскольку инициализация сделано на джаваскрипте. Раньше мы использовали другой компонент выбора даты, в котором отсутствовала функция выбора времени, но его можно было инициализировать с помощью атрибутов данных. Это значительно упростило задачу, потому что в проекте asp.net MVC 5, в котором использовался этот компонент, мы могли просто создать шаблон редактора, на который ссылались всякий раз, когда требовалось средство выбора даты, без необходимости писать какой-либо javascript. Я хотел бы придерживаться этого шаблона использования, но не смог найти никакой документации по нему в документах. . Я что-то упустил или это (пока) невозможно с помощью Bootstrap 3 Datepicker?


initialization datetimepicker twitter-bootstrap attributes eonasdan-datetimepicker
person BdN3504    schedule 04.02.2016    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете инициировать параметры средства выбора даты, используя атрибуты данных, как показано в следующем примере:

$('#datetimepicker1').datetimepicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/src/js/bootstrap-datetimepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="input-group date" >
              <input type='text' class="form-control" id="datetimepicker1" data-date-format="YYYY/MM/DD HH:mm" data-date-show-today-button="true" data-date-show-clear="true"/>
            </div>
        </div>
    </div>

Вы можете использовать data-date-* для установки параметра или data-date-options для установки объекта параметра. Инициализация data-*, на мой взгляд, плохо документирована, во всяком случае вы можете найти ссылку на нее здесь.

person VincenzoC    schedule 05.02.2016
comment
Спасибо, это работает наполовину... Установка простых параметров не проблема, установка сложных параметров, таких как значки, не работает. - person BdN3504; 05.02.2016