persian-datetime-picker-vue2
v1.2.8
Published
A vue plugin to select jalali date and time base on dayjs
Downloads
18
Maintainers
Readme
persian-datetime-picker-vue2 (based on dayjs)
A vue plugin to select jalali date and time based on
dayjs
See documentation and demo at vue-persian-datetime-picker
If you are using vuejs 3, please refer to this repository.
Installation
browser
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>
<script src="/dist/persian-datetime-picker-vue2.umd.min.js"></script>
<div id="app">
<date-picker v-model="date"></date-picker>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
date: '1401/08/02'
},
components: {
DatePicker: VuePersianDatetimePicker
}
})
</script>
npm
npm install persian-datetime-picker-vue2 --save
Usage
// main.js
//...
import VuePersianDatetimePicker from 'persian-datetime-picker-vue2'
Vue.component('date-picker', VuePersianDatetimePicker)
//...
Or in component
<template>
<div>
<date-picker v-model="date"></date-picker>
</div>
</template>
<script>
import VuePersianDatetimePicker from 'persian-datetime-picker-vue2'
export default {
data() {
return {
date: ''
}
},
components: {
datePicker: VuePersianDatetimePicker
}
}
</script>
You can also set default values:
// main.js
import VuePersianDatetimePicker from 'persian-datetime-picker-vue2'
Vue.use(VuePersianDatetimePicker, {
name: 'custom-date-picker',
props: {
inputFormat: 'YYYY-MM-DD HH:mm',
format: 'YYYY-MM-DD HH:mm',
editable: false,
inputClass: 'form-control my-custom-class-name',
placeholder: 'Please select a date',
altFormat: 'YYYY-MM-DD HH:mm',
color: '#00acc1',
autoSubmit: false
//...
//... And whatever you want to set as default
//...
}
})
Then use in component
<custom-date-picker v-model="date" />
Click to see full documentation and demo
License
This project is licensed under the MIT License