web-dev-qa-db-fra.com

Comment utiliser le sélecteur de date dans Angular 2?

J'ai essayé plusieurs sélecteurs de dates dans mon application angular2, mais aucun d'entre eux ne fonctionne. Bien que le sélecteur de dates s'affiche dans la vue, mais que la valeur de la date sélectionnée ne parvient pas à la variable ngModel.

jquerydatepickerangularangular2-forms
30
Mubashir

En fait, vous pouvez utiliser un sélecteur de date en ajoutant simplement la valeur date dans l'attribut type de vos entrées:

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

Dans certains navigateurs tels que Chrome et Microsoft Edge (pas dans Firefox), vous pouvez cliquer sur l'icône dans l'entrée pour afficher le sélecteur de date. Les icônes n'apparaissent que lorsque vous passez la souris sur l'entrée.

Pour avoir quelque chose à travers les navigateurs, vous devriez envisager d'utiliser des bibliothèques compatibles Angular2 comme:

48
Thierry Templier

PrimeNG fournit également un composant DatePicker, une démonstration en direct;

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

5
Cagatay Civici

Comme @thierry y a répondu oui, il y a une option pour nous d'utiliser 

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

pour obtenir la date de notre projet. mais oui, cela n’est pas compatible avec la plate-forme multi-navigateurs (comme mozila) et il existe de nombreuses bibliothèques croisées pour les mêmes.

J'ai fait deux calendriers de calendrier élégants avec le thème Bootflat qui est réactif aussi se référer ici

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

 enter image description here

espérons que cela vous donne plus datepicker navigateur plus élégant et multi.

2
Pardeep Jain

Pas sûr que cela aide mais nous voulions développer un sélecteur de date personnalisé pour notre projet et nous ne pouvions pas trouver beaucoup de Datepicker d'Angular2 à ce stade et nous avons donc fini par en écrire un moi-même.

C'est un simple qui sélectionne la date et vous pouvez également spécifier les dates que vous souhaitez désactiver avant et après. Il utilise un émetteur d'événements et définit la date sélectionnée dans un champ de texte. Il est publié dans npm et je travaille également à l’améliorer.

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

J'espère que ça aide.

1
Bhuvana L

Angular 2 (TypeScript)

peut également le faire avec l'événement blur.

regardez attentivement (blur)="newProjectModel.eEDate = eEDatePicker.value" sur l'événement de flou, il affecte la variable temporaire d'entrée #eEDatePicker à notre variable de modèle 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>

J'utilise ces bibliothèques d'amorçage:

bootstrap-datetimepicker.min.css

bootstrap-datetimepicker.min.js

1
Kaleem Ullah

Je viens de trouver mydatepicker package aujourd'hui, il suffit de taper npm install mydatepicker --save et de suivre les instructions ici si vous n'aimez pas leur style de nommage, créez simplement un composant wrapper qui fonctionne avec le type Date

0
shakram02

Voir ng2-boostrap datePicker semble écraser ngModel , alors que la question est différente, les réponses apportées résolvent le problème que vous avez décrit pour moi.

En supposant que vous utilisiez TypeScript, vous devez ajouter ceci au balisage HTML:

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

et dans le fichier composant ts, vous devrez importer

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

et ajoutez DATEPICKER_DIRECTIVES à votre liste de fournisseurs.

0
Herb F

pensez à utiliser angular-datepicker , il s'agit d'un sélecteur de date hautement configurable conçu pour les applications angulaires.

 enter image description here

0
vlio20

Ceci est ma solution:

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

}
0
ali6p