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 サイトの他の関連記事を参照してください。