Contents
Description:
Are you creating a project for Persian language? Then, you might need in your project to implement Persian date time picker for specific requirement. Here, we are sharing with you date picker for Persian language, which is light-weight and simple to use.
How to use it?
1. Install the component with npm.
npm install vue-persian-datetime-picker –save
2. Import the required component to use Persian date time picker.
import VuePersianDatetimePicker from ‘vue-persian-datetime-picker’;
3. Then, create the date time picker field in your template.
<template>
<div>
<date-picker v-model=”date”></date-picker>
</div>
</template>
4. Now, write the vueJS code to show the date time picker.
export default {
data(){
return {
date: ”
}
},
components: {
datePicker: VuePersianDatetimePicker
}
}
5. Available props.
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
//…
}
Change log
2.7.0 (2021-07-23)
Fixed moment.parseZoneFixed Unwanted change of date when using auto-submit and multiple togetherFeat: Added slots for next-month and prev-month buttonFeat: Ability to change the time using the keyboard
2.6.1 (2021-05-17)
Fixed year-month
2.6.0 (2021-02-05)
Added multiple selection (for type date only)Added popover modeClose picker with escape key
2.5.0 (2021-01-30)
Added range option (for type date only)Fixed issue
2.4.1 (2020-11-13)
Fixed issueFixed issue
2.4.0 (2020-10-17)
Added compat-time to display time on the front page (in datetime mode)Fixed clear value Fixed disabling in datetime modeFixed timezone in the first and second half of the year
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 supportedAdded some slots
2.1.6 (2020-07-13)
Fixed locale-config prop Added show-now-btn prop
2.1.5 (2020-04-19)
Fixed wrong date in Safari browsersFixed 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 modeFixed 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” />. Timezone support <date-picker type=”datetime” :timezone=”true” />.
2.0.2 (2019-07-17)
Flipped month change buttons in rtl directionAdded label to locales. Added display format to each locale. Fixed wrong date on date-time picker mode
2.0.1 (2019-05-11)
Fixed.Show the next step on submit button click.
2.0.0 (2019-01-16)
Added gregorian support <date-picker locale=”en” />Added locale configuration supportImproved css transitionsFixed 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 problemFixed responsive modeFixed watching to min-max changes
1.1.5 (2018-09-01)
Added emit on openAdded feature to highlight items and dates
1.1.4 (2018-08-12)
Added label for displayAdded feature to disable some datesAdded feature to disable or enable the datepickerIcons and css styles optimizationLoad 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.3Fixed “display-format” when is editableReset “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 valueFixed editable input bugAdded “Initial value”Package keywordsFixed css class nameFixed some other bugs
1.0.7 (2017-12-14)
Avoid submitting formAuto submit on wrapper click
1.0.5 (2017-12-04)
Fixed default value for “value”
The post A Simple To Use Persian Date Time Picker For VueJS appeared first on Lipku.com.
Permanent link to this post here
