Comment changer le format de la date dans le datepicker Angulaire de la ngx-bootstrap à l'intérieur d'un formulaire

À l'aide de la ngx-bootstrap Datepicker dans Angulaire 4 application,

Je sais que, normalement, vous pouvez spécifier le format de la date de cette manière:

<input id="from" name="from"
       bsDatepicker [(bsValue)]="myModel"
       value="{{ myModel | date:'yyyy-MM-dd'}}">

mais cette fois je suis à l'intérieur d'un modèle axé sur la forme Angulaire, donc mon entrée n'est pas lié à une variable comme myModel dans l'exemple ci-dessus, mais c'est juste lié à la forme:

<input id="from" name="from"
       bsDatepicker ngModel>

alors, comment puis-je spécifier le format de la date dans ce cas?

Modifier: on dirait qu'une façon d'y parvenir est par la création d'une nouvelle variable newVar à l'intérieur du composant, puis la liaison avec [(bsValue)]="newVar":

<input id="from" name="from"
       bsDatepicker ngModel
       [(bsValue)]="newVar"
       value="{{ newVar | date:'yyyy-MM-dd' }}">

Cependant je me demande si il y a une meilleure solution.

OriginalL'auteur Francesco Borzi | 2017-09-11

  1. 16

    [(bsValue)] est toujours disponible pour une utilisation avec bsDatepicker,
    sera-ce champ de saisie ou de ne pas

    si vous voulez changer le format d'un seul champ, alors

    [(bsValue)]="newVar" value="{{ newVar | date:'yyyy-MM-dd' }}" est bien

    bsDatepicker a l'intégration avec les champs de saisie et les formes, qui devrait fonctionner pour vous:

    <input name="from" bsDatepicker [(ngModel)]="newVar">

    et vous pouvez modifier globalement le format de date à l'entrée de la valeur via la config

    https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/bs-datepicker.config.ts#L31

    ou via [bsConfig]="{dateInputFormat: 'yyyy-MM-dd'}" sur l'élément avec bsDatepicker

    note: il y a actuellement un problème (v1.9.2) avec L format, il est toujours utilise les paramètres régionaux en-us

    être conscient de ce problème github.com/valor-software/ngx-bootstrap/issues/2809
    Problème connu, de travail
    à partir de la version 2.0, j'ai dû utiliser 'YYY-MM-DD' au lieu de 'yyyy-MM-dd'

    OriginalL'auteur valorkin

  2. 2

    Vous serez en mesure de donner des précisions sur la façon d'utiliser ce fichier de configuration pour utiliser un mondial format de date?

    Je suis passé par le github lien que vous avez fourni ci-dessus, mais a été incapable de comprendre comment l'utiliser dans mon projet, car il a beaucoup de fichiers d'importation. Je suis actuellement en utilisant le ci-dessous de code en ligne pour modifier le format de la date.

    bsDatepicker [(bsValue)]="newVar" value="{{ newVar | date:'yyyy-MM-dd' }}"

    Est-il une méthode pour mettre cette date au format 'yyyy-MM-dd' dans un fichier de config à l'échelle mondiale, de sorte que je peux, il suffit d'imprimer une date dans un champ de bsDatepicker sans avoir besoin de mentionner explicitement le format?

    OriginalL'auteur Pubudu Senarathne

  3. 2

    Si vous utilisez le Sélecteur de plage de dates, Alors vous devriez utiliser rangeInputFormat dans [bsConfig] au lieu de dateInputFormat.

    J'avais Fixé par cette option
    Je peux confirmer que cela fonctionne parfaitement avec une Plage de Date Picker, m'a pris du temps pour trouver cette solution!

    OriginalL'auteur MANMOHAN