datepicker-jp
v1.47.3
Published
Date input components (Datepicker), specialized for use in Japan. It can be used with plain HTML pages other than vue.js.
Downloads
39
Maintainers
Readme
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/ )
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>
License
Copyright © 2024-present sinroku.com