`vue-drumroll-datetime-picker` はスクロールで操作可能なドラム式デートタイムピッカーです。 日付のみ、時刻のみのピッカーもあります。
npm install vue-drumroll-datetime-pickervue-drumroll-datetime-picker はスクロールで操作可能なドラム式デートタイムピッカーです。
日付のみ、時刻のみのピッカーもあります。
画面に直接設置できる据え置き形式とダイアログ形式があり、レスポンシブにも対応。
年月日の順序やラベルの編集などカスタマイズも豊富に取り揃え、使いやすく自由度の高いライブラリです。
さらにファイルサイズは50kb以下の超軽量。
動作の様子は デモページ からお試しいただけます。
``bash
yarn add vue-drumroll-datetime-picker
or
npm install vue-drumroll-datetime-picker
`
`javascript
import { createApp } from 'vue'
import DateTimePicker from 'vue-drumroll-datetime-picker'
import 'vue-drumroll-datetime-picker/dist/style.css'
const app = createApp()
app.use(DateTimePicker)
`
`vue`
または
`vue`
#### DateTimePicker
| 項目名 | 型 | デフォルト | 説明 |
|-------------------|------------------------------|---------------------------|------------------------------------------------|
| dateOrder | Array | ['year', 'month', 'date'] | 年月日の順序 |
| dialog | Boolean | false | ピッカーをダイアログで開く |
| dragSensitivity | [String, Number] | 1.7 | ドラッグ感度 |
| format | String | "YYYY-MM-DD HH:mm" | 日付形式 |
| height | [String, Number] | "10em" | ピッカーの高さ |
| hideOverlay | Boolean | false | ダイアログ表示のオーバーレイを非表示にする。dialog が true の場合のみ有効 |dialog
| hideButton | Boolean | false | ダイアログ表示の確定ボタンを非表示にする。 が true の場合のみ有効 |undefined
| locale | String | | 言語の指定 ※主に曜日の表記に使用 |value + 100 years
| maxDate | [String, Number, Date] | | 有効な最大日時 |required
| minDate | [String, Number, Date] | 1900-01-01 00:00 | 有効な最低日時 |
| minuteInterval | [String, Number] | 1 | 分単位の間隔 |
| modelValue | [String, Number, Date] | | 変更対象の値 |undefined
| pattern | Object | | ピッカーのラベルをカスタマイズできる。
詳細は下に記載 |
| scrollSensitivity | [String, Number] | 1.0 | スクロール感度 |
| touchSensitivity | [String, Number] | 1.7 | タッチ操作の感度 |
| type | ["datetime", "date", "time"] | "datetime" | ピッカーの種類。日時・年月日・時刻の3種類から選択 |
#### DatePicker
| 項目名 | 型 | デフォルト | 説明 |
|-------------------|------------------------|---------------------------|-------------------|
| dateOrder | Array | ['year', 'month', 'date'] | 年月日の順序 |
| dialog | Boolean | false | ピッカーをダイアログで開く |
| dragSensitivity | [String, Number] | 1.7 | ドラッグ感度 |
| format | String | "YYYY-MM-DD HH:mm" | 日付形式 |
| height | [String, Number] | "10em" | ピッカーの高さ |
| hideOverlay | Boolean | false | ダイアログ表示のオーバーレイを非表示にする。dialog が true の場合のみ有効 |dialog
| hideButton | Boolean | false | ダイアログ表示の確定ボタンを非表示にする。 が true の場合のみ有効 |undefined
| locale | String | | 言語の指定 ※主に曜日の表記に使用 |value + 100 years
| maxDate | [String, Number, Date] | | 有効な最大日時 |required
| minDate | [String, Number, Date] | 1900-01-01 00:00 | 有効な最低日時 |
| modelValue | [String, Number, Date] | | 変更対象の値 |undefined
| pattern | Object | | ピッカーのラベルをカスタマイズできる。
詳細は下に記載 |
| scrollSensitivity | [String, Number] | 1.0 | スクロール感度 |
| touchSensitivity | [String, Number] | 1.7 | タッチ操作の感度 |
#### TimePicker
| 項目名 | 型 | デフォルト | 説明 |
|-------------------|------------------------|-------------|-------------------------------------------------|
| dialog | Boolean | false | ピッカーをダイアログで開く |
| dragSensitivity | [String, Number] | 1.7 | ドラッグ感度 |
| format | String | "HH:mm" | 日付形式 |
| height | [String, Number] | "10em" | ピッカーの高さ |
| hideOverlay | Boolean | false | ダイアログ表示のオーバーレイを非表示にする。dialog が true の場合のみ有効 |dialog
| hideButton | Boolean | false | ダイアログ表示の確定ボタンを非表示にする。 が true の場合のみ有効 |undefined
| locale | String | | 言語の指定 ※主に曜日の表記に使用 |required
| minuteInterval | [String, Number] | 1 | 分単位の間隔 |
| modelValue | [String, Number, Date] | | 変更対象の値 |undefined
| pattern | Object | | ピッカーのラベルをカスタマイズできる。
詳細は下に記載 |
| scrollSensitivity | [String, Number] | 1.0 | スクロール感度 |
| touchSensitivity | [String, Number] | 1.7 | タッチ操作の感度 |
"pattern" props は、ピッカーに表示するラベルをカスタマイズするために利用します。
これによって和暦の年号や曜日、AM/PMといった補足情報をピッカーに表示できます。
#### 完全な例
```
{
year: "YYYY",
month: "MMM", // -> Jan
date: "DD(ddd)", // -> 08(Tue)
hour: "A hh", // -> PM 9
minute: "mm",
dividerDate: "/", // -> 2022/Jan/08(Tue)
dividerTime: "@", // -> PM 9@15
}