Vue Component Library

Appearance

DatePicker Demo ​

This demo showcases the various features and configurations of the ODatePicker component.

Basic Date Picker ​

The most basic usage of the date picker component.

vue
<template>
  <div class="demo-section">
    <ODatePicker
      v-model="basicDate"
      label="Select Date"
      placeholder="Choose a date"
    />
    <p class="mt-2 text-sm text-gray-600">
      Selected: {{ basicDate || 'None' }}
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const basicDate = ref(null);
</script>

Selected: None

Time Picker ​

Select only time with various configurations.

vue
<template>
  <div class="demo-section">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <ODatePicker
        v-model="timeValue"
        type="time"
        label="Select Time"
        placeholder="Choose time"
        :is24="true"
        :enable-seconds="false"
      />
      <ODatePicker
        v-model="customFormatTime"
        type="time"
        label="12-Hour Format"
        placeholder="Choose time"
        :is24="false"
        :enable-seconds="true"
        format="hh:mm:ss A"
        display-format="hh:mm:ss A"
      />
    </div>
    <p class="mt-2 text-sm text-gray-600">
        Selected: {{ timeValue || 'None' }}
    </p>
    <p class="mt-2 text-sm text-gray-600">
        Selected: {{ customFormatTime || 'None' }}
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const timeValue = ref(null);
const customFormatTime = ref(null);
</script>

Selected: None

Selected: None

Date and Time Picker ​

Select both date and time in a single component.

vue
<template>
  <div class="demo-section">
    <ODatePicker
      v-model="dateTimeValue"
      type="datetime"
      label="Select Date and Time"
      placeholder="Choose date and time"
      :is24="true"
      :enable-seconds="true"
      format="dd/MM/yyyy HH:mm:ss"
      display-format="DD/MM/YYYY HH:mm:ss"
    />
    <p class="mt-2 text-sm text-gray-600">
      Selected: {{ dateTimeValue ? new Date(dateTimeValue).toLocaleString() : 'None' }}
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const dateTimeValue = ref(null);
</script>

Selected: None

Date Range Picker ​

Select a range of dates for booking or scheduling.

vue
<template>
  <div class="demo-section">  
    <ODatePicker
      v-model="dateRange"
      :range="true"
      label="Select Date Range"
      placeholder="Choose start and end dates"
      format="dd/MM/yyyy"
      display-format="DD/MM/YYYY"
      :min-date="new Date()"
    />
    <p class="mt-2 text-sm text-gray-600">
      Selected Range: 
      {{ dateRange && dateRange.length > 0
        ? `${new Date(dateRange[0]).toLocaleDateString()} - ${new Date(dateRange[1]).toLocaleDateString()}`
        : 'None' }}
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const dateRange = ref(null);
</script>

Selected Range: None

Multi-Dates Picker ​

Select multiple individual dates for events or appointments.

vue
<template>
  <div class="demo-section">
    <ODatePicker
      v-model="multiDates"
      :multi-dates="true"
      :multi-dates-limit="5"
      label="Select Multiple Dates"
      placeholder="Choose up to 5 dates"
      format="dd/MM/yyyy"
      display-format="DD/MM/YYYY"
    />
    <p class="mt-2 text-sm text-gray-600">
      Selected Dates: 
      {{ multiDates && multiDates.length > 0 
        ? multiDates.map(date => new Date(date).toLocaleDateString()).join(', ')
        : 'None' }}
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const multiDates = ref([]);
</script>

Selected Dates: None

Form Integration with Validation ​

Complete form example with validation rules and error handling.

vue
<template>
  <div class="demo-section">
    <form @submit.prevent="submitForm" class="space-y-4">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <ODatePicker
          v-model="formData.startDate"
          label="Start Date"
          placeholder="Select start date"
          :rules="validationRules"
          :min-date="new Date()"
        />
        <ODatePicker
          v-model="formData.endDate"
          label="End Date"
          placeholder="Select end date"
          :rules="validationRules"
          :min-date="formData.startDate || new Date()"
        />
      </div>
      
      <ODatePicker
        v-model="formData.appointmentTime"
        type="time"
        label="Appointment Time"
        placeholder="Select appointment time"
        :rules="[(v) => !!v || 'Time is required']"
        :is24="false"
      />
      
      <div class="flex gap-2">
        <button 
          type="submit" 
          class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          Submit Form
        </button>
        <button 
          type="button" 
          @click="validateForm"
          class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
        >
          Validate Only
        </button>
      </div>
      
      <!-- Error Display -->
      <div v-if="formErrors.startDate || formErrors.endDate || formErrors.appointmentTime" class="mt-4 p-3 bg-red-50 border border-red-200 rounded">
        <h4 class="text-red-800 font-medium">Validation Errors:</h4>
        <ul class="text-red-700 text-sm mt-1">
          <li v-if="formErrors.startDate">{{ formErrors.startDate }}</li>
          <li v-if="formErrors.endDate">{{ formErrors.endDate }}</li>
          <li v-if="formErrors.appointmentTime">{{ formErrors.appointmentTime }}</li>
        </ul>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const formData = ref({
  startDate: null,
  endDate: null,
  appointmentTime: null
});
</script>

Submitted Results:

{"startDate":null,"endDate":null,"appointmentTime":null}

Custom Formatting ​

Examples with custom date and time formats.

vue
<template>
  <div class="demo-section">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <ODatePicker
        v-model="customFormatDate"
        label="Custom Date Format"
        placeholder="Select date"
        format="yyyy-MM-dd"
        display-format="YYYY-MM-DD"
        output-format="YYYY-MM-DD"
      />
      <ODatePicker
        v-model="customFormatTime"
        type="time"
        label="Custom Time Format"
        placeholder="Select time"
        format="HH:mm"
        display-format="HH:mm"
        output-format="HH:mm"
        :is24="true"
      />
    </div>
    <p class="mt-2 text-sm text-gray-600">
      Date: {{ customFormatDate || 'None' }} | 
      Time: {{ customFormatTime || 'None' }}
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const customFormatDate = ref(null);
const customFormatTime = ref(null);
</script>

Date: None | Time: None