日本語の説明はこちら ⇒(https://dp-jp.sinroku.net/)
- 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
You can use it from a CDN without "build step".
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/datepicker-jp"></script>
<form action="https://jkorpela.fi/cgi-bin/echo.cgi" method="post">
<div id="vueapp" style="margin: 1rem;">
<dpjp style="width: 15rem;" :font-size="'2rem'"></dpjp>
</div>
<input type="submit" value="送信ボタン" style="margin: 1rem;">
</form>
<script>
Vue.createApp().component('dpjp', DpJp.DatepickerJp8).mount('#vueapp');
</script>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>Copyright © 2024-present sinroku.com