vue3-datepick

A simple, customizable date picker component for Vue 3.

import { createApp, h, ref } from 'vue'
import DatePicker from 'vue3-datepick'

const App = {
  setup() {
    const selectedDate = ref('2023-10-01')

    const updateModelValue = (newValue) => {
      selectedDate.value = newValue
    }

    return {
      selectedDate,
      updateModelValue,
    }
  },
  render() {
    return h(DatePicker, {
      modelValue: this.selectedDate,
      'onUpdate:modelValue': this.updateModelValue,
      displayFormat: 'yyyy-MM-dd',
      disabled: false,
      placeholder: 'Please select a date',
      isDateDisabled: (date) => date.getDay() === 0,
      months: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December',
      ],
      weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      yearFirst: false,
      startWeekOnSunday: false,
      yearContent: '',
    })
  },
}

createApp(App).mount('#app')

Features

• Simple interface
• Customizable date formats and styles
• Disable specific dates
• Lightweight with minimal dependencies

Installation

To install the component in your project, run the following command:

npm install vue3-datepick

or using yarn:

yarn add vue3-datepick

Basic Usage

<template>
  <DatePick v-model="selectedDate" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DatePick from 'vue3-datepick'

const selectedDate = ref('')
</script>

For more detailed setup instructions, refer to the Installation Guide.