Utilities

Auto submit 1.0.0+

            
<date-picker :auto-submit="true" />

            
<date-picker :auto-submit="false" />

The default value of autoSubmit prop is true

Disable 2.0.0+

The disable prop, disables dates or times that passed to this prop.

1. You can pass the String, Array, RegExp and Function to this prop.

2. The format of disabling dates must be jYYYY/jM/jD and for times, the format must be H:m (without zero-padding). --> 1400/1/1 9:5

Date

            
<date-picker disable="{{today.toString('jYYYY/jM/jD')}}" />

            
<date-picker :disable="['{{today.clone().date(10).toString('jYYYY/jM/jD')}}', '{{today.clone().date(20).toString('jYYYY/jM/jD')}}']" />

            
<date-picker :disable="/{{new RegExp(today.toString('jYYYY/jM/*')).source}}/" />

                
<date-picker :disable="disableDates" />

                
methods: {
    disableDates(date) {
        return date.month() == {{today.month()}};
    }
}

Time

            
<date-picker type="time" disable="17:0" />

Datetime

            
<date-picker type="datetime" :disable="['{{today.clone().date(10).toString('jYYYY/jM/jD')}}', '{{today.clone().date(20).toString('jYYYY/jM/jD 19:45')}}']" />

Clearable 2.0.0+

With this prop, you can clear selected dates or times.

            
<date-picker v-model="date" clearable />

Shortcut 2.2.0+

With this prop, you can use the shortcut buttons to select dates or times.

            
<date-picker shortcut :auto-submit="false" />

If you want to change the shortcuts name, use the locale-config prop. See in here!

You can pass the object to this prop for the custom shortcuts

                
<date-picker :shortcut="shortcut" />

                
data() {
    return {
        shortcut: {
            "name of shortcut": ["{{today.toString()}}", "{{today.clone().addDay().toString()}}"]
        }
    }
}

Also you can use PersianDate.

                
<date-picker :shortcut="shortcut" mode="single" />

                
data() {
    return {
        shortcut: {
            "tomorrow": [new PersianDate().addDay().toString()]
        }
    }
}

Also, you can use it in time type.

                
<date-picker :shortcut="shortcut" mode="single" type="time" />

                
data() {
    return {
        shortcut: {
            "Five O'Clock": ['5:00'],
            "Six O'Clock": ['6:00']
        }
    }
}

Alternative field 2.0.0+

If you want to use an input with hidden type, you can pass the alt-name to the component.

            
<date-picker alt-name="date" />

If you want to use an array of dates in the alt field, have to add the [] to the end of the value of alt-name.

            
<date-picker alt-name="date[]" />

Also, you can change the format of the alt field, with the alt-format attribute. By default, the format of the alt field, equal to the format prop.

            
<date-picker alt-name="date[]" alt-format="jYYYY/jMM/jDD" />

Normal mode

Array mode

                
<date-picker alt-name="date" />

// Result:

<div>
    <input name="date" type="hidden" value="2021-03-01 - 2021-03-03">
</div>

            
<date-picker alt-name="date[]" />

// Result:

<div>
    <input name="date[]" type="hidden" value="2021-03-01">
    <input name="date[]" type="hidden" value="2021-03-03">
</div>