はじめに

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 を参照

目次

  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 を参照

参考文献

関連記事