A vue plugin to select jalali date and time
npm install vue-persian-datetime-picker
> 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.
html
`$3
bash
npm install vue-persian-datetime-picker --save
`Configuration for moment to ignore loading locales
javascript
// webpack.config.js:
module.exports.plugins = [
//...
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
//...
]// vue.config.js:
module.exports = {
//..
configureWebpack: {
plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
},
//...
}
`$3
javascript
// main.js
//...
import VuePersianDatetimePicker from 'vue-persian-datetime-picker';
Vue.component('date-picker', VuePersianDatetimePicker);
//...
`
Or in component
html
`
You can also set default values:
javascript
// 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
html
`$3
Built With
* 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.
License
This project is licensed under the MIT License
Change log
$3
* Fixed change the time with keyboard in popover mode
* Fixed popover configuration$3
* Fixed popover position in rtl pages
* Fixed keep the selected day in simple mode$3
* Fixed popover mode when using custom input
* Fixed change jump-minute by muse wheel$3
* Fixed build problem #191 #190 #188$3
* Feat: Added support for display format when using $3
* Fixed: Using jumpMinute and roundMinute together$3
* Feat: Added simple-mode
* Feat: Added
* Feat: Added and @prev-month events
* Feat: Added @year-change and @month-change events
* Fixed: Mouse wheel in Firefox
* Fixed: Prevent selected dates from being reset$3
* Feat: Added ability to control route in show/close action
* Fixed Date change animation and transition$3
* Fixed moment.parseZone
* Fixed Unwanted change of date when using auto-submit and multiple together
* Feat: Added slots for next-month and prev-month button
* Feat: Ability to change the time using the keyboard$3
* Fixed year-month$3
* Added multiple selection (for type date only)
* Added popover mode
* Close picker with escape key, fixes #141
$3
* Added range option (for type date only)
* Fixed #136$3
* Fixed #131
* Fixed #128$3
* 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$3
* Added convert-numbers prop that converts numbers to persian in fa locale: $3
* Custom localization is now supported
* Added some slots$3
* Fixed prop #116
* Added show-now-btn prop #109$3
* Fixed wrong date in Safari browsers
* Fixed scroll to element (year section)$3
* Fixed initial locale value$3
* Fixed jumpMinute and roundMinute in datetime mode
* Fixed time animation effect$3
* Fixed JumpMinute and hour change$3
* Added "year-month" type . fixed #70
* Timezone support . fixed #33$3
* 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
$3
* Fixed #53
* Show the next step on submit button click, instead of submitting immediately #41
$3
* Added gregorian support
* Added locale configuration support
* Improved css transitions
* Fixed min-max in time picker$3
* Fixed critical error
$3
* Added jumpMinute and roundMinute to time-picker
* Added clear button
* Added inline mode
* Fixed 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"