Datepicker-jp NPM

datepicker-jp

Date input components (Datepicker), specialized for use in Japan.

It can be used with plain HTML pages other than vue.js.

DOCUMENTATION

日本語の説明はこちら ⇒ ( https://dp-jp.sinroku.net/ )

npm.io

Features

Single date picker
Month picker
Year picker
Pick by decade
Pick by era
For ja-JP locale
JST(+0900) only
Vuetify theme (optional)
Included type definitions
Included umd format library

Usage

You can use it from a CDN without "build step".

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/datepicker-jp"></script>

<form action="https://postform.sinroku.net/" method="post">
  <div id="vueapp" style="margin: 1rem;">
    <dpjp style="width: 15rem;" font-size="2rem" color="#9c27b0"></dpjp>
  </div>
  <input type="submit" value="送信ボタン" style="margin: 1rem;">
</form>
<script>
  Vue.createApp().component('dpjp', DpJp.DatepickerJp8).mount('#vueapp');
</script>

Install

Or import and register components and build.

npm install datepicker-jp

<script lang="ts" setup>
import {ref} from "vue";
import {DatepickerJp} from 'datepicker-jp';
const dpJp_modelValue = ref();
</script>

<template>
  <DatepickerJp v-model="dpJp_modelValue" :year-select-mode="3"> // 選択できる年を明治以降にするモード
    <span style="color: blue;">datepicker-jp</span>              // コンポーネントの上部に表示する内容
    <template v-slot:dialog>
      <span style="color: green;">datepicker-jp:dialog</span>    // ダイアログの上部に表示する内容
    </template>
  </DatepickerJp>
  <input type="text" id="modelText" v-model="dpJp_modelValue" /> // このテキスト入力と連動する
</template>