describe

In the project, there is a requirement that the selection date cannot cross the month. When you click on a certain day in a certain month, the end time can only be selected in the month of the first selection date, as shown in the figure below

Flipping through the elemental-UI documentation reveals a picker-option attribute in which disabledDate is combined with onPick to do this

Method implementation

<qb-date-picker 

    v-model="dateVal"  

    type="daterange"

    format="yyyy-MM-dd"

    :default-time="[' 00:00:00 ', '23:59:59]" 

    range-separator="To"

    start-placeholder="Start Date"

    end-placeholder="End date"

    :picker-options="pickerOptions"

></qb-date-picker>export default { data() { selectDate: null, dateVal:'', pickerOptions: { disabledDate: Time => {if (this.selectDate == null) {return false} else {if (this.selectDate == null); Return time.getFullYear()! =this.selectDate.getFullYear() || time.getMonth() ! = this.selectdate.getmonth ()}}, onPick: date => {if (date.mindate &&! date.maxDate) { this.selectDate = date.minDate } else { this.selectDate = null } } } } }Copy the code

Thank you for your sharing, and record yourself, so as not to forget the original address in the future