Amin-persian-vue-picker NPM

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/moment-jalaali@0.7.4/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)

Fixed #131
Fixed #128

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)

Fixed locale-config prop #116
Added show-now-btn prop #109

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)

Fixed #53
Show the next step on submit button click, instead of submitting immediately #41

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