Cómo usar el selector de fecha en Angular 2?

PrimeNG también proporciona un componente DatePicker, demostración en vivo;

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

Como respondió @thierry sí, hay una opción para que usemos

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

Para obtener la fecha para nuestro proyecto. pero sí, esto no es compatible con la plataforma de múltiples navegadores (como mozila) y hay muchas bibliotecas de navegadores cruzados para el mismo.

He hecho dos Datepickers calendario elegante usando Bootflat tema que es sensible también consulte aquí

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

Espero que esto le da más elegante y multi navegador datepicker.

No estoy seguro de si ayuda, pero queríamos desarrollar un datepicker personalizado para nuestro proyecto y no pudimos encontrar muchos Datepicker Angular2 en ese momento y, por lo tanto, terminé escribiendo uno simple.

Es una simple que selecciona la fecha y también puede especificar las fechas que desea deshabilitar antes y después. Utiliza emisor de eventos y establece la fecha seleccionada en un campo de texto. Está publicado en npm y estoy trabajando en mejorarlo como bien.

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

Espero que ayude.

Angular 2 (Typescript)

También Puede hacer esto con blur evento.

Mire de cerca (blur)="newProjectModel.eEDate = eEDatePicker.value" en el evento de desenfoque, asigna un valor de variable temporal de entrada #eEDatePicker a nuestra variable de modelo 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>

Estoy usando estas bibliotecas bootstrap:

Bootstrap-datetimepicker.min.css

Bootstrap-datetimepicker.min.js

Ver ng2-boostrap datePicker parece sobrescribir ngModel, mientras que la pregunta es diferente, las respuestas dadas a ella resolvieron el problema que me describiste.

Suponiendo que use typescript, debe agregar esto al marcado html:

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

Y en el archivo ts del componente, deberá importar

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

Y agregue los DATEPICKER_DIRECTIVES a su lista de proveedores.

Esta es mi solución:

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

}

Acabo de encontrar el paquete mydatepicker hoy simplemente escriba npm install mydatepicker --save y siga las instrucciones aquí si no le gusta su estilo de nomenclatura, simplemente cree un componente de envoltura alrededor de él que funcione con Date type

Considere usar angular-datepicker, es un selector de fecha altamente configurable construido para aplicaciones Angulares.