Maison > interface Web > Voir.js > le corps du texte

Méthode d'implémentation du composant de sélection de date et d'heure dans le document Vue

王林
Libérer: 2023-06-20 21:03:10
original
4018 Les gens l'ont consulté

Vue est un framework front-end populaire qui nous fournit une riche bibliothèque de composants. Dans les projets réels, il est souvent nécessaire d'utiliser des composants de sélection de date et d'heure. Vue fournit de nombreuses méthodes pratiques pour implémenter ce composant, les plus couramment utilisées sont vue-datepicker et vue-datetime-picker.

1. Utilisation de vue-datepicker

vue-datepicker est un composant de sélecteur de date basé sur Vue Il peut être installé via NPM :

npm install vue-datepicker --save
Copier après la connexion

Pour utiliser ce composant, vous devez l'importer dans le composant Vue :

import Datepicker from 'vue-datepicker'
Copier après la connexion
.

Dans le composant Vue, nous pouvons utiliser ce composant pour sélectionner une date :

<datepicker v-model="myDate"></datepicker>
Copier après la connexion

Lorsque l'utilisateur sélectionne la date, elle sera liée à la propriété myDate de l'instance Vue via v-model. De plus, nous pouvons également configurer le sélecteur de date en définissant les accessoires :

<datepicker v-model="myDate" language="zh" format="yyyy-MM-dd" :disabled-dates="disabledDates"></datepicker>

<script>
export default {
  data () {
    return {
      myDate: '',
      disabledDates: {
        to: new Date()
      }
    }
  }
}
</script>
Copier après la connexion

Dans le code ci-dessus, nous définissons le sélecteur de date sur Chinois simplifié et le format de date est "aaaa-MM-jj". Nous définissons également la propriété DisabledDates, qui rend les dates postérieures à aujourd'hui non sélectionnables.

2. Utilisation de vue-datetime-picker

vue-datetime-picker est un composant de sélecteur de date et d'heure basé sur Vue, qui peut être installé via NPM :

npm install vue-datetime-picker --save
Copier après la connexion

L'utilisation de ce composant est similaire à vue-datepicker, nous besoin Introduit dans le composant Vue :

import DatetimePicker from 'vue-datetime-picker'
Copier après la connexion

Puis utilisé dans le composant Vue :

<datetime-picker v-model="myDatetime"></datetime-picker>
Copier après la connexion

Grâce à la liaison v-model, nous pouvons lier la date et l'heure sélectionnées par l'utilisateur à la propriété myDatetime de l'instance Vue. Nous pouvons également configurer le sélecteur de date et d'heure en définissant les accessoires :

<datetime-picker v-model="myDatetime" language="zh" format="yyyy-MM-dd hh:mm" :disabled-dates="disabledDates"></datetime-picker>

<script>
export default {
  data () {
    return {
      myDatetime: '',
      disabledDates: {
        to: new Date()
      }
    }
  }
}
</script>
Copier après la connexion

Dans le code ci-dessus, nous définissons le sélecteur de date et d'heure sur Chinois simplifié, et le format de date est "aaaa-MM-jj hh:mm". Nous définissons également l'attribut DisabledDates, qui rend les dates et heures après aujourd'hui non sélectionnables.

3. Résumé

Vue fournit de nombreuses méthodes pratiques pour implémenter les composants de sélecteur de date et d'heure. Dans cet article, nous présentons deux composants couramment utilisés : vue-datepicker et vue-datetime-picker. Grâce à eux, nous pouvons rapidement implémenter le composant de sélection de date et d'heure, permettant aux utilisateurs de sélectionner facilement la date et l'heure souhaitées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal