A vue plugin to select jalali date and time
A vue plugin to select jalali date and time
See documentation and demo at vue-persian-datetime-picker
If you are using vuejs 3, please refer to this repository.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/moment-jalaali.js"></script>
<script src="/dist/vue-persian-datetime-picker.umd.min.js"></script>
<div id="app">
<date-picker v-model="date"></date-picker>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
date: '1397/02/02'
},
components: {
DatePicker: VuePersianDatetimePicker
}
});
</script>
npm install vue-persian-datetime-picker --save
Configuration for moment to ignore loading locales
// webpack.config.js:
module.exports.plugins = [
//...
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
//...
]
// vue.config.js:
module.exports = {
//..
configureWebpack: {
plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
},
//...
}
// main.js
//...
import VuePersianDatetimePicker from 'vue-persian-datetime-picker';
Vue.component('date-picker', VuePersianDatetimePicker);
//...
Or in component
<template>
<div>
<date-picker v-model="date"></date-picker>
</div>
</template>
<script>
import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
export default {
data(){
return {
date: ''
}
},
components: {
datePicker: VuePersianDatetimePicker
}
}
</script>
// main.js
import VuePersianDatetimePicker from 'vue-persian-datetime-picker';
Vue.use(VuePersianDatetimePicker, {
name: 'custom-date-picker',
props: {
inputFormat: 'YYYY-MM-DD HH:mm',
format: 'jYYYY-jMM-jDD 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" />
This project is licensed under the MIT License
custom-input
input-attrs
@next-month
and @prev-month
events@year-change
and @month-change
eventsauto-submit
and multiple
togetherdate
only)escape
key, fixes #141date
only)compat-time
to display time on the front page (in datetime mode)convert-numbers
prop that converts numbers to persian in fa locale: <date-picker convert-numbers />
<date-picker type="year-month" />
. fixed #70<date-picker type="datetime" :timezone="true" />
. fixed #33<date-picker locale="en" />
<date-picker type="time" :jumpMinute="5" :roundMinute="true" />
<date-picker :clearable="true" />
<date-picker :inline="true" />
tab
key press problemmin-max
changes