A vue plugin to select jalali date and time
See documentation and demo at vue-persian-datetime-picker
<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="https://cdn.jsdelivr.net/npm/vue-persian-datetime-picker/dist/vue-persian-datetime-picker-browser.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
webpack.config.js:
/**
* configuration for moment to ignore loading locales
*/
module.exports.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"></custom-date-picker>
- Vue.js - The Progressive JavaScript Framework.
- Moment.js - Parse, validate, manipulate, and display dates and times in JavaScript.
- moment-jalaali - A Jalaali (Jalali, Persian, Khorshidi, Shamsi) calendar system plugin for moment.js.
This project is licensed under the MIT License
- Fixed year-month
- Added multiple selection (for type
date
only) - Added popover mode
- Close picker with
escape
key, fixes #141
- Added range option (for type
date
only) - Fixed #136
- Added
compat-time
to display time on the front page (in datetime mode) - Fixed clear value #125
- Fixed disabling in datetime mode #123
- Fixed timezone in the first and second half of the year #108
- Added
convert-numbers
prop that converts numbers to persian in fa locale:<date-picker convert-numbers />
- Custom localization is now supported
- Added some slots
- Fixed wrong date in Safari browsers
- Fixed scroll to element (year section)
- Fixed initial locale value
- Fixed jumpMinute and roundMinute in datetime mode
- Fixed time animation effect
- Fixed JumpMinute and hour change
- Added "year-month" type
<date-picker type="year-month" />
. fixed #70 - Timezone support
<date-picker type="datetime" :timezone="true" />
. fixed #33
- Flipped month change buttons in rtl direction
- Added label to locales. fixed #67
- Added display format to each locale. fixed #68
- Fixed wrong date on date-time picker mode
- Added gregorian support
<date-picker locale="en" />
- Added locale configuration support
- Improved css transitions
- Fixed min-max in time picker
- Fixed critical error
- Added jumpMinute and roundMinute to time-picker
<date-picker type="time" :jumpMinute="5" :roundMinute="true" />
- Added clear button
<date-picker :clearable="true" />
- Added inline mode
<date-picker :inline="true" />
- Fixed
tab
key press problem - Fixed responsive mode
- Fixed watching to
min-max
changes
- Added emit on open
- Added feature to highlight items and dates
- Added label for display
- Added feature to disable some dates
- Added feature to disable or enable the datepicker
- Icons and css styles optimization
- Load component via script tag
- Fixed "min-date" bug
- Updated "moment-jalaali" version to 0.7.3
- Fixed "display-format" when is editable
- Reset "view" value
- Added "append-to"
- Added "display format"
- Added default settings feature
- Clear input value
- Fixed editable input bug
- Added "Initial value"
- Package keywords
- Fixed css class name
- Fixed some other bugs
- Avoid submitting form
- Auto submit on wrapper click
- Fixed default value for "value"