vue-persian-datetime-picker-fix-date
v2.6.0
Published
A vue plugin to select jalali date and time
Downloads
8
Maintainers
Readme
vue-persian-datetime-picker
A vue plugin to select jalali date and time
See documentation and demo at vue-persian-datetime-picker
Installation
browser
<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
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$/)
//...
]
Usage
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>
You can also set default values:
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>
Click to see full documentation and demo
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
2.6.0 (2021-02-05)
- Added multiple selection (for type
date
only) - Added popover mode
- Close picker with
escape
key, fixes #141
2.5.0 (2021-01-30)
- Added range option (for type
date
only) - Fixed #136
2.4.1 (2020-11-13)
2.4.0 (2020-10-17)
- 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
2.3.0 (2020-08-30)
- Added
convert-numbers
prop that converts numbers to persian in fa locale:<date-picker convert-numbers />
2.2.0 (2020-08-02)
- Custom localization is now supported
- Added some slots
2.1.6 (2020-07-13)
2.1.5 (2020-04-19)
- Fixed wrong date in Safari browsers
- Fixed scroll to element (year section)
2.1.4 (2020-01-30)
- Fixed initial locale value
2.1.2 (2019-09-08)
- Fixed jumpMinute and roundMinute in datetime mode
- Fixed time animation effect
2.1.1 (2019-09-07)
- Fixed JumpMinute and hour change
2.1.0 (2019-08-19)
- Added "year-month" type
<date-picker type="year-month" />
. fixed #70 - Timezone support
<date-picker type="datetime" :timezone="true" />
. fixed #33
2.0.2 (2019-07-17)
- 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
2.0.1 (2019-05-11)
2.0.0 (2019-01-16)
- Added gregorian support
<date-picker locale="en" />
- Added locale configuration support
- Improved css transitions
- Fixed min-max in time picker
1.1.7 (2018-12-31)
- Fixed critical error
1.1.6 (2018-12-29)
- 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
1.1.5 (2018-09-01)
- Added emit on open
- Added feature to highlight items and dates
1.1.4 (2018-08-12)
- 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
1.1.3 (2018-05-22)
- Fixed "min-date" bug
1.1.2 (2018-05-12)
- Updated "moment-jalaali" version to 0.7.3
- Fixed "display-format" when is editable
- Reset "view" value
1.1.1 (2018-05-03)
- Added "append-to"
- Added "display format"
1.1.0 (2018-05-01)
- Added default settings feature
1.0.9 (2017-12-25)
- Clear input value
- Fixed editable input bug
- Added "Initial value"
- Package keywords
- Fixed css class name
- Fixed some other bugs
1.0.7 (2017-12-14)
- Avoid submitting form
- Auto submit on wrapper click
1.0.5 (2017-12-04)
- Fixed default value for "value"