vue日期时间选择插件_一个Vue插件来选择Jaalali日期和时间

vue日期时间选择插件

Vue波斯日期时间选择器 (vue-persian-datetime-picker)

A vue plugin to select jalali date and time.

一个vue插件来选择jalali日期和时间。

View demo 查看演示 Download Source 下载源

正在安装 (Installing)

npm install vue-persian-datetime-picker --save

webpack.config.js:

webpack.config.js：

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

用法 (Usage)

main.js

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

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>

翻译自: https://vuejsexamples.com/a-vue-plugin-to-select-jalali-date-and-time/

vue日期时间选择插件