Como usar o selector de datas em Angular 2?

O PrimeNG também oferece um componente de DatePicker, demo ao vivo;

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

Como respondida por @thierry sim, há uma opção para nós usarmos

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

Fiz dois Datepickers de calendário elegantes usando o tema Bootflat que é sensível também aqui

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

Espero que isto lhe dê mais estilo e multi navegador datepicker.

Não sei se ajuda, mas nós queríamos desenvolver um datepicker personalizado para o nosso projeto e não conseguimos encontrar um monte de Angular2 Datepicker nesse ponto e, portanto, acabou escrevendo um simples eu mesmo.

É um simples que selecciona a data e pode também indicar as datas que deseja desactivar antes e depois. Ele usa o emissor de eventos e define a data selecionada em um campo de texto. É publicado no npm e estou a trabalhar para o melhorar como bem.

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

Angular 2 (Tipescript)

Também pode fazer isto com blur evento.

Olhe de perto para (blur)="newProjectModel.eEDate = eEDatePicker.value" no evento de borrão, atribui valor à variável temporária de entrada #eEDatePicker para a nossa variável modelonewProjectModel.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>

Estou a usar estas bibliotecas bootstrap:

Iniciatstrap-datetimepicker.minuto.css

Iniciatstrap-datetimepicker.minuto.js

Ver ng2-boostrap datePicker parece sobrepor o ngModel , enquanto a pergunta é diferente, as respostas dadas a ele resolveram o problema que você descreveu para mim.

Assumindo que está a usar o typescript, terá de adicionar isto à marcação html:

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

E no ficheiro ts componente, terá de importar

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

E adicione as instruções DATEPICKER_DIRECTIVES à sua lista de fornecedores.

Esta é a minha solução:

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();
    });

}

Acabei de encontrar o meu leitor pacote de hoje basta digitar {[[0]} e seguir as instruções AQUI Se não gosta do seu estilo de nomeação, basta criar um componente de embalagem em torno dele que funciona com o tipo de data

Considere a utilização de selector de dados angular , é um selector de datas altamente configurável construído para aplicações angulares.