はじめに

NativeScript(NativeScript-Vue) で davecoffin/nativescript-modal-datetimepicker で DatePicker/TimePicker を使用する方法

TL;DR

  • インストール
    • NS6-: tns plugin add nativescript-modal-datetimepicker@x.y.z
    • NS7+: ns plugin add nativescript-modal-datetimepicker
  • README.md の情報だけだと分かりづらいので、デモ用コードも合わせて見た方が良い
  • import, new して pickDate や pickTime
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

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

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.6
BuildVersion:	19G2021

$ node -v
v12.7.0

$ npm -v
6.14.5

$ tns --version
6.8.0

$ npm ls @nativescript/core tns-core-modules tns-ios nativescript-vue nativescript-modal-datetimepicker
├── @nativescript/core@6.5.19
├── nativescript-modal-datetimepicker@1.2.4
├── nativescript-vue@2.4.0
├── tns-core-modules@6.5.19
└── tns-ios@6.5.2

詳細

セットアップ

参考: Installation

NativeScript 7 以降か、NativeScript 6 以前かでインストール方法が異なる。

NativeScript 6- の場合は以下

1
$ tns plugin add nativescript-modal-datetimepicker@1.2.4

NativeScript 7+ の場合は以下

1
$ ns plugin add nativescript-modal-datetimepicker

使い方

README.md の情報だけだと分かりづらいので、デモ用コードも合わせて見た方が良い。

基本は import, new してから pickDate や pickTime を実行する感じ。

1
2
3
4
5
6
7
8
9
10
11
12
import { ModalDatetimepicker } from "nativescript-modal-datetimepicker";
const date_picker = new ModalDatetimepicker();

const pickDate = async () => {
  const res = await date_picker.pickDate({
    startingDate,
    datePickerMode: 'spinner',
    cancelLabel: 'キャンセル',
    doneLabel: 'OK',
  });
  console.log({res});
};

参考: Response Interfaces

pickDate の戻り値サンプルは以下

1
2
3
4
5
6
7
8
// 選択完了時
{ year: 2020, month: 9, day: 1 }

// キャンセル時(iOS)
false

// キャンセル時(Android)
undefined

サンプル実装

NativeScript-Vue で DatePicker の実装サンプル

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
<template>
  <Page>
    <StackLayout>
      <Label text="生年月日"/>
      <Label :text="birthday" @tap="pickDate" v-if="birthday" />
      <Label text="タップして選択" @tap="pickDate" v-else />
    </StackLayout>
  </Page>
</template>

<script >
import { ModalDatetimepicker } from "nativescript-modal-datetimepicker";

export default {
  data() {
    return {
      date_picker: null,
      birthday: null,
    }
  },
  created() {
    this.date_picker = new ModalDatetimepicker();
  },
  methods: {
    async pickDate() {
      const startingDate = new Date();
      const res = await this.date_picker.pickDate({
        startingDate,
        datePickerMode: 'spinner',
        cancelLabel: 'キャンセル',
        doneLabel: 'OK',
      });
      if (!res) {
        return;
      }

      const month = res.month < 10 ? `0${res.month}` : res.month;
      const day = res.day < 10 ? `0${res.day}` : res.day;
      this.birthday = `${res.year}/${month}/${day}`;
    },
  },
}
</script>

まとめ

  • インストール
    • NS6-: tns plugin add nativescript-modal-datetimepicker@x.y.z
    • NS7+: ns plugin add nativescript-modal-datetimepicker
  • README.md の情報だけだと分かりづらいので、デモ用コードも合わせて見た方が良い
  • import, new して pickDate や pickTime

参考文献

関連記事

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