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 --saveConfiguration 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" />- 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 change the time with keyboard in popover mode
- Fixed popover configuration
- Fixed build problem #191 #190 #188
- Feat: Added support for display format when using
custom-input
- Feat: Added simple-mode
- Feat: Added
input-attrs - Feat: Added
@next-monthand@prev-monthevents - Feat: Added
@year-changeand@month-changeevents - Fixed: Mouse wheel in Firefox
- Fixed: Prevent selected dates from being reset
- Feat: Added ability to control route in show/close action
- Fixed Date change animation and transition
- Fixed moment.parseZone
- Fixed Unwanted change of date when using
auto-submitandmultipletogether - Feat: Added slots for next-month and prev-month button
- Feat: Ability to change the time using the keyboard
- Fixed year-month
- Added multiple selection (for type
dateonly) - Added popover mode
- Close picker with
escapekey, fixes #141
- Added range option (for type
dateonly) - Fixed #136
- Added
compat-timeto 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-numbersprop 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
tabkey press problem - Fixed responsive mode
- Fixed watching to
min-maxchanges
- 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"
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent