A Simple To Use Persian Date Time Picker For VueJS


Category: Vue.js VueJS Date & Time | July 24, 2021
Author: talkhabi
Official Page: Go to website
Last Update: July 24, 2021
License: MIT

vuejs persian date time picker

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.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

2.6.1 (2021-05-17)

  • Fixed year-month

2.6.0 (2021-02-05)

  • Added multiple selection (for type date only)
  • Added popover mode
  • Close 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 issue
  • Fixed 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 mode
  • Fixed 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 supported
  • Added 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 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" />.
  • Timezone support <date-picker type="datetime" :timezone="true" />.

2.0.2 (2019-07-17)

  • Flipped month change buttons in rtl direction
  • Added 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 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”