Validation

We have created a custom datepicker by using vue3-daterange-picker.

Custom styles

For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your form. For server side validation read full documentation.

							
                                
<template>
    <BForm>
        <BFormGroup label="Date Range Picker" label-for="datePicker-1" class="mb-3">
            <HkDateRangePicker
                id="datePicker-1"
                :dateRange="dateRangeForEx1"
                :locale-data="{ format: 'mm/dd/yyyy' }"
                :time-picker24-hour="false"
                :linked-calendars="true"
            />
        </BFormGroup>
        <BFormGroup label="Date Range Picker With Times" label-for="datePicker-2" class="mb-3">
            <HkDateRangePicker
                id="datePicker-2"
                :dateRange="dateRangeForEx2"
                :locale-data="{ format: 'm/dd hh:mm TT' }"
                :time-picker="true"
                :time-picker24-hour="false"
            />
        </BFormGroup>
        <BFormGroup label="Single Date Picker" label-for="datePicker-3" class="mb-3">
            <HkDateRangePicker
                id="datePicker-3"
                :date-range="{ startDate: '10/18/1984' }"
                :single-date-picker="true"
                :show-dropdowns="true"
                :time-picker="true"
                :time-picker24-hour="false"
            />
        </BFormGroup>
        <BFormGroup label="Time Select" label-for="datePicker-4" class="mb-3">
            <HkDateRangePicker
                id="datePicker-4"
                :date-range="dateRangeForEx2"
                :locale-data="{ format: 'hh:mm:ss' }"
                :show-dropdowns="true"
                :time-picker="true"
                :time-picker-seconds="true"
                :time-picker24-hour="false"
                :timePickerOnly="true"
            />
        </BFormGroup>
    </BForm>
</template>

<script>
import moment from "moment";

export default {
  setup() {
    const dateRangeForEx1 = ref({
      startDate: "01/01/2024",
      endDate: "01/15/2024",
    });

    const dateRangeForEx2 = ref({
      startDate: moment().startOf("hour").toDate(),
      endDate: moment().startOf("hour").add(32, "hour").toDate(),
    });

    return {
      dateRangeForEx1,
      dateRangeForEx2,
    };
  },
};
</script>