Kaedah pelaksanaan komponen pemilihan tarikh dan masa dalam dokumen Vue

Vue ialah rangka kerja bahagian hadapan yang popular yang memberikan kami perpustakaan komponen yang kaya. Dalam projek sebenar, selalunya perlu menggunakan komponen pemilihan tarikh dan masa. Vue menyediakan banyak kaedah mudah untuk melaksanakan komponen ini, yang lebih biasa digunakan ialah vue-datepicker dan vue-datetime-picker.

1. Penggunaan vue-datepicker

vue-datepicker ialah komponen pemilih tarikh berdasarkan Vue Ia boleh dipasang melalui NPM:

npm install vue-datepicker --save

Untuk menggunakan komponen ini, anda memerlukan Import dalam komponen Vue:

import Datepicker from 'vue-datepicker'

Dalam komponen Vue, kita boleh menggunakan komponen ini untuk memilih tarikh:

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

Apabila pengguna memilih tarikh, ia akan terikat kepada Vue melalui v-model Sifat myDate bagi contoh. Selain itu, kami juga boleh mengkonfigurasi pemilih tarikh dengan menetapkan prop:

<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>

Dalam kod di atas, kami menetapkan pemilih tarikh kepada Bahasa Cina Ringkas dan format tarikh ialah "yyyy-MM-dd". Kami juga menetapkan sifat disabledDates, yang menjadikan tarikh selepas hari ini tidak boleh dipilih.

2. Penggunaan vue-datetime-picker

vue-datetime-picker ialah komponen datetime picker berasaskan Vue, yang boleh dipasang melalui NPM:

npm install vue-datetime-picker --save

The penggunaan komponen ini adalah serupa dengan vue-datepicker Kita perlu memperkenalkannya dalam komponen Vue:

import DatetimePicker from 'vue-datetime-picker'

dan kemudian gunakannya dalam komponen Vue:

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

Melalui v-model binding, kita boleh mengikat pengguna Waktu tarikh yang dipilih terikat pada sifat myDatetime bagi contoh Vue. Kami juga boleh mengkonfigurasi pemilih tarikh dan masa dengan menetapkan prop:

<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>

Dalam kod di atas, kami menetapkan pemilih tarikh dan masa kepada Bahasa Cina Ringkas dan format tarikh ialah "yyyy-MM-dd hh:mm ". Kami juga menetapkan atribut disabledDates, yang menjadikan masa tarikh selepas hari ini tidak boleh dipilih.

3. Ringkasan

Vue menyediakan banyak kaedah mudah untuk melaksanakan komponen pemilih tarikh dan masa. Dalam artikel ini, kami memperkenalkan dua komponen yang biasa digunakan: vue-datepicker dan vue-datetime-picker. Melaluinya, kami boleh melaksanakan komponen pemilih tarikh dan masa dengan cepat, membolehkan pengguna memilih tarikh dan masa yang dikehendaki dengan mudah.

Atas ialah kandungan terperinci Kaedah pelaksanaan komponen pemilihan tarikh dan masa dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!