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

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

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

import Datepicker from 'vue-datepicker'

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

<datepicker v-model="myDate"></datepicker>

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>

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

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

import DatetimePicker from 'vue-datetime-picker'

Puis utilisé dans le composant Vue :

<datetime-picker v-model="myDatetime"></datetime-picker>

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>

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!