The measurement is determined by the type attribute. You can enable quick options via shortcuts property. The disabled date is set by disabledDate, which is a function.
<template><b-date-pickerv-model="value"type="date"placeholder="Pick a day"class="w-200px"/></template><scriptlang="ts"setup>import{ ref }from'vue'const value =ref()</script>
When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the unlink-panels attribute.
—
—
<template><b-row><b-col><b-form-itemlabel="Default range"><b-date-pickerv-model="value1"type="daterange"start-placeholder="Start date"end-placeholder="End date"/></b-form-item></b-col><b-col><b-form-itemlabel="Range with quick options"><b-date-pickerv-model="value2"type="daterange"unlink-panelsstart-placeholder="Start date"end-placeholder="End date":shortcuts="shortcuts"/></b-form-item></b-col></b-row></template><scriptlang="ts"setup>import{ ref }from'vue'const value1 =ref('')const value2 =ref('')const shortcuts =[{text:'Last week',value:()=>{const end =newDate()const start =newDate()
start.setTime(start.getTime()-3600*1000*24*7)return[start, end]},},{text:'Last month',value:()=>{const end =newDate()const start =newDate()
start.setTime(start.getTime()-3600*1000*24*30)return[start, end]},},{text:'Last 3 months',value:()=>{const end =newDate()const start =newDate()
start.setTime(start.getTime()-3600*1000*24*90)return[start, end]},},]</script>
When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the unlink-panels attribute.
—
—
<template><b-row><b-col><b-form-itemlabel="Default range"><b-date-pickerv-model="value1"type="monthrange"start-placeholder="Start date"end-placeholder="End date"/></b-form-item></b-col><b-col><b-form-itemlabel="Range with quick options"><b-date-pickerv-model="value2"type="monthrange"unlink-panelsstart-placeholder="Start date"end-placeholder="End date":shortcuts="shortcuts"/></b-form-item></b-col></b-row></template><scriptlang="ts"setup>import{ ref }from'vue'const value1 =ref('')const value2 =ref('')const shortcuts =[{text:'Last week',value:()=>{const end =newDate()const start =newDate()
start.setTime(start.getTime()-3600*1000*24*7)return[start, end]},},{text:'Last month',value:()=>{const end =newDate()const start =newDate()
start.setTime(start.getTime()-3600*1000*24*30)return[start, end]},},{text:'Last 3 months',value:()=>{const end =newDate()const start =newDate()
start.setTime(start.getTime()-3600*1000*24*90)return[start, end]},},]</script>
If user hasn't picked a date, shows today's calendar by default. You can use default-value to set another date. Its value should be parsable by `new Date().
If type is daterange, default-value sets the left side calendar.
When picking a date range, you can assign the time part for start date and end date.
By default, the time part of start date and end date are both 00:00:00. Setting default-time can change their time respectively. It accepts an array of up to two Date objects. The first string sets the time for the start date, and the second for the end date.