Как использовать средство выбора даты в Angular 2?

Ответ 1

Фактически вы можете использовать datepicker, просто добавив значение date в атрибут type ваших входов:

<input type="date" [(ngModel)]="company.birthdate"/>

В некоторых браузерах, таких как Chrome и Microsoft Edge (не в Firefox), вы можете щелкнуть по значку на вкладке, чтобы отобразить выбор даты. Значки появляются только тогда, когда мышь находится над входом.

Чтобы иметь что-то перекрестные браузеры, вы должны рассмотреть возможность использования Angular2 совместимых библиотек, таких как:

• https://github.com/kekeh/mydatepicker
• https://github.com/jkuri/ng2-datepicker

Ответ 2

PrimeNG также предоставляет компонент DatePicker, живую демонстрацию;

http://www.primefaces.org/primeng/#/calendar

Ответ 3

Как ответил @thierry да, есть возможность использовать

<input type="date" [(ngModel)]="company.birthdate"/>

для получения даты для нашего проекта. но да, это несовместимо для мультиплатформенной формы (например, mozila), и для этого есть много библиотеки кросс-браузера.

Я сделал два стильных календаря Datepickers, используя тему Bootflat, которая тоже отзывчива.

https://github.com/MrPardeep/Angular2-DatePicker

надеюсь, что это даст вам более стильный и многопользовательский датпикер.

Ответ 4

Не уверен, что это помогает, но мы хотели разработать пользовательский датпикер для нашего проекта, и мы не смогли найти много Angular2 Datepicker в этот момент и, следовательно, в итоге сами создали простой.

Его простой, который выбирает дату, и вы также можете указать даты, которые вы хотите отключить до и после. Он использует событие-эмиттер и задает выбранную дату в текстовом поле. Он опубликован в npm, и я также работаю над его улучшением.

https://www.npmjs.com/package/angular2-simple-datepicker

Надеюсь, что это поможет.

Ответ 5

Angular 2 (Typescript)

также может сделать это с событием blur.

внимательно посмотрите на (blur)="newProjectModel.eEDate = eEDatePicker.value" на событие размытия, он присваивает входную временную переменную #eEDatePicker значение нашей переменной модели newProjectModel.eEDate

<form (ngSubmit)="onSubmit()" #newProjectForm="ngForm" >
  <div class="row">
    <div class="col-sm-4">
      <div class="form-group">
        <label for="end-date">Expected Finish Date</label>
        <div class='input-group date datetimepicker'>
          <input type='text' class="form-control" required [(ngModel)]="newProjectModel.eEDate" name="eEDate" #eEDate="ngModel" #eEDatePicker (blur)="newProjectModel.eEDate = eEDatePicker.value" />
          <span class="input-group-addon">
            <span class="fa fa-calendar"></span>
          </span>
        </div>
        <div [hidden]="eEDate.valid || eEDate.pristine" class="alert alert-danger">
          Expected Finish Date is required
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer" [hidden]="submitted">
    <button [hidden]="submitted" type="button" class="btn btn-red" data-dismiss="modal" >Cancel</button>
    <button [hidden]="submitted" type="submit" class="btn btn-green" [disabled]="!newProjectForm.form.valid">Save</button>
  </div>
  <div class="modal-footer" [hidden]="!submitted">
    <button [hidden]="!submitted" focus class="btn btn-green" data-dismiss="modal"  (click)="submitted=false">Ok</button>
  </div>
</form>

Я использую эти библиотеки бутстрапов:

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

Ответ 6

См. ng2-boostrap datePicker, кажется, перезаписывает ngModel, в то время как вопрос другой, ответы на него решили проблему, которую вы описали для меня.

Предполагая использовать typescript, вам нужно добавить это в разметку html:

<datepicker [(ngModel)]="dateValue" [showWeeks]="false"</datepicker>

и в файле ts компонента вам нужно будет импортировать

import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

и добавьте DATEPICKER_DIRECTIVES в список поставщиков.

Ответ 7

Это мое решение:

HTML

<input id="send_date"
       type="text"
       [(ngModel)]="this.dataModel.send_date"
       name="send_date"
       #send_date="ngModel"
       class="date-picker"
       data-date-format="dd-mm-yyyy">

.TS

//My data model has "send_date" property
dataModel: MyDataModel;

ngAfterViewInit() {

    //important point: You have to create a reference to this outer scope
    var that = this;

    $('#send_date').datepicker({
        //... your datepicker attributes
    }).change(function () {
        that.dataModel.send_date = $('#send_date').val();
    });

}

Ответ 8

Я только что нашел mydatepicker пакет сегодня просто введите npm install mydatepicker --save и следуйте инструкциям здесь, если вам не нравится их стиль именования, просто создайте вокруг него оберточный компонент, который работает с типом даты

Ответ 9

рассмотрите возможность использования angular-datepicker, это настраиваемый сборщик дат, созданный для приложений Angular.