Display

Show with prop 1.0.0+

With this feature you can show datepicker with a button or other elements.

                
<date-picker :show="show" @close="show=false" />

<button @click="show=true">Show</button>

                
data() {
    return {
        show: false
    }
}

Close event documentation is here!

If you do not want to when focusing on the datepicker, that's to be displayed, use the below prop.

Click on 1.0.0+

With this feature, you can specify the datepicker to display with which elements.

            
<date-picker click-on="input" />

            
<date-picker click-on="icon" />

            
<date-picker click-on="none" />

The default value of clickOn prop is "all"

Column 1.0.0+

            
<date-picker :column="1" />

You can pass the object to this prop for responsive datepicker

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

                
data() {
    return {
        column: {
            576: 1,  // under 576px, column count is 1
            992: 2,  // under 992px, column count is 2
            2000: 3, // under 2000px, column count is 3
        }
    }
}

The default value of column prop is "{ 576: 1 }"

If the breaking point in the object is not specified, the default value it's 2

            
<date-picker :modal="true" />

Label 1.0.0+

            
<date-picker label="تاریخ تولد: " mode="single" />

If you want to use customize label, use before slot.

Display

Show with prop 1.0.0+

Click on 1.0.0+

Column 1.0.0+

Modal mode 1.0.0+

Label 1.0.0+