ホームページ >ウェブフロントエンド >Vue.js >Vueドキュメントにおける日時選択コンポーネントの実装方法
Vue は、豊富なコンポーネント ライブラリを提供する人気のあるフロントエンド フレームワークです。実際のプロジェクトでは、多くの場合、日付と時刻の選択コンポーネントを使用する必要があります。 Vue には、このコンポーネントを実装するための便利なメソッドが多数用意されており、より一般的に使用されるメソッドは vue-datepicker と vue-datetime-picker です。
1. vue-datepicker の使用
vue-datepicker は、Vue に基づいた日付ピッカー コンポーネントであり、NPM を通じてインストールできます:
npm install vue-datepicker --save
このコンポーネントを使用するには、 Vue コンポーネントでインポートする必要があります:
import Datepicker from 'vue-datepicker'
Vue コンポーネントでは、このコンポーネントを使用して日付を選択できます:
<datepicker v-model="myDate"></datepicker>
ユーザーが日付を選択すると、日付は Vue にバインドされます。 v-model 経由 インスタンスの myDate プロパティ。さらに、小道具を設定して日付ピッカーを構成することもできます。
<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>
上記のコードでは、日付ピッカーを簡体字中国語に設定し、日付形式は「yyyy-MM-dd」です。また、disabledDates プロパティも設定します。これにより、今日以降の日付が選択できなくなります。
2. vue-datetime-picker の使用
vue-datetime-picker は Vue ベースの日時ピッカー コンポーネントであり、NPM を通じてインストールできます:
npm install vue-datetime-picker --save
このコンポーネントの使用法は vue-datepicker に似ています。これを Vue コンポーネントに導入する必要があります:
import DatetimePicker from 'vue-datetime-picker'
そして、それを Vue コンポーネントで使用します:
<datetime-picker v-model="myDatetime"></datetime-picker>
v-model バインディングを通じて、ユーザーをバインドできます。選択した日時は、Vue インスタンスの myDatetime プロパティにバインドされます。小道具を設定して日付と時刻のピッカーを構成することもできます:
<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>
上記のコードでは、日付と時刻のピッカーを簡体字中国語に設定し、日付形式は「yyyy-MM-dd hh:mm」です。 」。また、disabledDates 属性も設定します。これにより、今日以降の日付時刻が選択できなくなります。
3. 概要
Vue には、日付と時刻のセレクター コンポーネントを実装するための便利なメソッドが多数用意されています。この記事では、よく使用される 2 つのコンポーネント、vue-datepicker と vue-datetime-picker を紹介します。これらにより、日付と時刻のピッカー コンポーネントを迅速に実装できるため、ユーザーは希望の日付と時刻を簡単に選択できるようになります。
以上がVueドキュメントにおける日時選択コンポーネントの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。