Как добавить DatePicker в интерфейс JHipster

Я хочу изменить одну из страниц объекта JHipster, чтобы использовать DatePicker. Я включил зависимости от Bower, добавил URL-адрес библиотеки js на страницу индекса. Я не уверен, как включить bootstrap css, мне использовать компас или что-то еще? Или вы, может быть, знаете лучшую библиотеку для пользовательского интерфейса.


angularjs jhipster angular-ui-bootstrap compass-sass
person daliborn    schedule 25.01.2015    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Я добавил его в свой проект с помощью WebJars:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap-datepicker</artifactId>
    <version>1.3.1</version>
</dependency>

Затем я использую class = "date" в своих полях даты и использую следующий HTML / JS для инициализации поля.

<link rel="stylesheet" type="text/css" media="all" href="/webjars/bootstrap-datepicker/1.3.1/css/datepicker.css" />
<script type="text/javascript" src="/webjars/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.date').datepicker({format: "mm/dd/yyyy", weekStart: "0"});
    });
</script>

Чтобы сделать это с помощью Bower, я использовал следующие шаги:

В bower.json добавьте bootstrap-datepicker в качестве зависимости. Я добавил его сразу после bootstrap-sass.

"bootstrap-datepicker": "1.3.1"

Затем запустите:

bower install

В src / main / webapp / index.html добавьте ссылки на файлы CSS и JS:

<head>
    ...
    <link rel="stylesheet" src="bower_components/bootstrap-datepicker/css/datepicker.css">
    ...
</head>

<script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

Чтобы доказать, что это работает, я добавил поле «дата рождения» в register.html. Обратите внимание, что атрибут data-provide запускает всплывающий календарь.

    <div class="form-group">
        <label for="birthdate">Birth Date</label>
        <input type="text" class="form-control" name="birthdate" data-provide="datepicker">
    </div>
person Matt Raible    schedule 26.01.2015
comment
Это работает, но WebJars не является частью стандартного стека JHipster, это еще одна структура. Я подумал, что там есть что-то попроще с существующим стеком. - person daliborn; 27.01.2015
comment
Я добавил инструкции для беседки к своему исходному ответу. Надеюсь это поможет! - person Matt Raible; 27.01.2015
comment
Работает, спасибо! ... как мне передать варианты? ... мне нужно изменить формат даты - person Rafael; 24.08.2015

arrow_upward
0
arrow_downward

Альтернативой этому является использование модуля AngularJS Bootstrap, который предоставляет несколько других виджетов, помимо Datepicker.

bower install angular-bootstrap

Полная документация здесь и здесь

person user1880957    schedule 19.07.2015