はじめに

NativeScript(NativeScript-Vue) で NativeScript/nativescript-datetimepicker を使って、Locale を意識した DatePicker/TimePicker

TL;DR

  • tns plugin add nativescript-datetimepicker でインストール
  • NativeScript-Vue は Vue.use(DateTimePicker) で準備
  • <DatePickerField locale="ja_JP" /> で日本向けの日付選択
  • その他プロパティは Features を参照
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
    2. 使い方
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.5
BuildVersion:	19F101

$ node -v
v12.7.0

$ npm -v
6.14.5

$ tns --version
6.5.0

$ tns plugin
Dependencies:
┌───────────────────────────────┬─────────────────────┐
│ Plugin                        │ Version             │
│ @nativescript/theme           │ ^2.2.1              │
│ @vue/devtools                 │ ^5.0.6              │
│ nativescript-datetimepicker   │ ^1.2.2              │
│ nativescript-socketio         │ ^3.2.1              │
│ nativescript-toasty           │ ^1.3.0              │
│ nativescript-vue              │ ^2.4.0              │
│ nativescript-vue-devtools     │ ^1.2.0              │
│ tns-core-modules              │ ^6.0.0              │
└───────────────────────────────┴─────────────────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin                             │ Version │
│ @babel/core                        │ ^7.0.0  │
│ @babel/preset-env                  │ ^7.0.0  │
│ babel-loader                       │ ^8.0.2  │
│ nativescript-dev-webpack           │ ^1.0.0  │
│ nativescript-vue-template-compiler │ ^2.0.0  │
│ nativescript-worker-loader         │ ~0.9.0  │
│ node-sass                          │ ^4.9.2  │
│ vue-loader                         │ ^15.4.0 │
└────────────────────────────────────┴─────────┘

$ grep -C1 version package.json
"tns-android": {
  "version": "6.5.1"
},
"tns-ios": {
  "version": "6.5.1"
},

詳細

DatePicker だと Locale 設定(あるいは表示順などの変更)ができなかった。(あるかもだけど見つけきれなかった)

1
2
3
4
5
6
7
<template>
  <Page>
    <StackLayout>
      <DatePicker/>
    </StackLayout>
  </Page>
</template>

NativeScript/nativescript-datetimepicker だと Locale 設定ができる。

セットアップ

tns plugin add でプラグイン追加

1
$ tns plugin add nativescript-datetimepicker

使い方

参考: Usage

NativeScript-Vue では Vue.use を実行して、DatePickerField, TimePickerField, DateTimePickerFields で使用。

app/main.js

1
2
3
4
5
6
 import Vue from 'nativescript-vue'

+import DateTimePicker from "nativescript-datetimepicker/vue";
+Vue.use(DateTimePicker);
+
 ...

locale で Localization ができる。

xxxx.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
  <Page>
    <StackLayout>
      <DatePickerField
        hint="選択してください"
        pickerTitle="生年月日"
        :pickerDefaultDate="defaultBirthday"
        :date="birthday"
        locale="ja_JP"
        dateFormat="yyyy/MM/dd"
        @dateChange="onBirthdayChange"
      />
    </StackLayout>
  </Page>
</template>

<script >
  const moment = require('moment');
  export default {
    data() {
      return {
        birthday: null,
        defaultBirthday: null,
      }
    },
    created() {
      this.setDefaultBirthday();
    },
    methods: {
      setDefaultBirthday() {
        this.defaultBirthday = moment().format('y/MM/DD');
      },
      onBirthdayChange(args) {
        // args.value に選択結果
        this.birthday = moment(args.value).format('y/MM/DD');
      },
    },
  }
</script>

<style scoped lang="scss">
timepickerfield,
datepickerfield {
  font-size: 16;
  placeholder-color: #aaa;
}
</style>

その他細かいプロパティなどは Features を参照。

まとめ

  • tns plugin add nativescript-datetimepicker でインストール
  • NativeScript-Vue は Vue.use(DateTimePicker) で準備
  • <DatePickerField locale="ja_JP" /> で日本向けの日付選択
  • その他プロパティは Features を参照

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list