vue3-datetime-js

See documentation and demo at vue-datetime-js

Installation

npm

npm install vue3-datetime-js --save

webpack.config.js:

/**
 * configuration for moment to ignore loading locales
 */
module.exports.plugins = [
    //...
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    //...
]

Usage

main.js

//...
import VueDatetimeJs from 'vue3-datetime-js';
Vue.component('date-picker', VueDatetimeJs);
//...

Or in component

<template>
    <div>
        <date-picker v-model="date"></date-picker>
    </div>
</template>
 
<script>
    import VueDatetimeJs from 'vue3-datetime-js'
    export default {
        data(){
            return {
                date: ''
            }
        },
        components: {
            datePicker: VueDatetimeJs
        }
    }
</script>

You can also set default values:

main.js

import VueDatetimeJs from 'vue3-datetime-js';
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>

Built With

• Vuejs - 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.
• moment-hijri - A Hijri calendar (Based on Umm al-Qura calculations) plugin for moment.js.
• vue-persian-datetime-picker - A vue plugin to select jalali date and time.

License

This project is licensed under the MIT License

Change log

3.0.0(2022-04-06)

• Support vue3

1.2.2 (2019-12-04)

• Fix build and ReadMe

1.2.1 (2019-12-02)

• Fix sample page vue

1.2.0 (2019-12-02)

• Add calendar (gregory, jalali, hijri)

1.1.0 (2019-12-01)

• Remove localeLange
• Add Hijri calendar
• Fix (Hijri ('ar-sa') - Jalalli ('fa') - Gregory ('en'))

1.0.4 (2019-11-28)

• Some Test

1.0.3 (2019-11-28)

• Add localeLange Prop

1.0.2 (2019-11-28)

• Some Test

1.0.1 (2019-11-28)

• Fix Readme file

1.0.0 (2019-11-28)

• Fork from vue-persian-datetime-picker