vue3-ios-datepicker

A ios Date picker for website in vue 3
959
vue3 vue 3 datepicker vue3-datepicker vue-component vue3-component ios vue3-ios-datepicker ios-datepicker
Install
npm install vue3-ios-datepicker
Latest Version:2.0.0
Vue:3
Last Updated:Jul 6, 2026
Links: GitHub  ·  npm
Maintainer: cuonghm

Getting Started

A ios Date picker for website in vue 3

Features

  • Single date picker
  • Time picker
  • Month picker
  • Year picker
  • Quarter picker
  • Week picker
  • Custom v-model
  • SSR support
  • Highly configurable
  • Accessible
  • Included type definitions

Installation

# npm
npm install vue3-ios-datepicker

# yarn
yarn add vue3-ios-datepicker

# pnpm
pnpm add vue3-ios-datepicker

# bun
bun add vue3-ios-datepicker

How to use

<template>
  <Vue3IosDatepicker v-model="value" />
</template>

<script setup lang="ts">
import { Vue3IosDatepicker } from "vue3-ios-datepicker"; // import component
const value = ref<Date>(new Date());
</script>

Props and attributes

ID Type Default Description
placeholder String Select date Placeholder of native input
id String Id of native input
name String Name of native input
format String YYYY-MM-DD Format of the displayed value in the input box
iconClose String Custom close icon in bottom sheet of calendar
class String Custom class container
inputClass String Custom class native input
title String Select Date Custom title in bottom sheet of calendar
defaultValue Date Optional, default date of the calendar
confirmLabel String OK Text of confirm button in bottom sheet of calendar
icon String CalendarIcon Custom calendar icon
disabledDate Function: (data: Date) => boolean a function determining if a date is disabled with that date as its parameter. Should return a Boolean
options Object See in below
lang String en language
locale Object Locale Object

Options

ID Type Default Description
minDate Date disable confirm button if value less than minDate
maxDate Date disable confirm button if value greather than maxDate

Events

  • onChange: Emitted value when click confirm button

Related Packages

qalendar

Event calendar and date picker for Vue 3

156,674 293
datepicker vue 3 vue-component calendar vue
qalendar-extended

Event calendar and date picker for Vue 3

368 0
datepicker vue 3 vue-component calendar vue
vue3-easy-data-table

A customizable and easy-to-use data table component made with Vue.js 3.x.

1,037,919
vue-component vue3 vue3-component data-table data-table-component
vuejs3-datepicker

Vue 3 datepicker

404,124 70
datepicker vue 3 vue-component date javascript library month monthpicker picker typescript +2
vue3-pivot-data-table

A non-aggregating Vue3 table component for presenting pivot-like data

2,791 3
vue-component vue3 vue3-component data-table data-table-component

Version History

Version Released Vue License
2.0.0 ^3.0.0
1.0.5 ^3.0.0
1.0.4 ^3.0.0
1.0.3 ^3.0.0
1.0.2 ^3.0.0