Nuxt UI Timepicker

A beautiful time picker for Nuxt 3 apps using Nuxt UI and Culori.

✨ Features

This module consists of three nuxt-ui based components for getting a reusable TimePicker:

• TimePicker.vue: A button-icon with popup-based time picker with emitting and receiving an hourMinute object: {hour: number, minute: number}
• InputTimePicker.vue: Input field with time string in v-model (HH:MM)
• ClockDial.vue: Reusable clock dial canvas (used internally by TimePicker and InputTimePicker) - can be used for making your own version of a TimePicker
• culori is used to get the primary color from the nuxt-ui settings.
• Fully styled with Nuxt UI components
• Supports dark mode
• Made with ❤️ by Paul Becue at BQ Systems – Oostende, Belgium -
• MIT licensed:

Installation

Create a new nuxt project

pnpm create nuxt <project-name>

Install the module and extra dependencies

pnpm add @iconify-json/lucide @iconify-json/simple-icons @nuxt/kit culori @nuxt/ui nuxt-ui-timepicker 

Add modules to nuxt.config.ts

modules: [
  '@nuxt/ui',
  'nuxt-ui-timepicker'
]

Screenshots of playground and ClockDial.vue

playground index.vue

ClockDial.vue

Source code and playground - on github.com

• Contains source code and a simple app that shows the usage of the TimePickers.
• View on GitHub

Inspired by a jquery plugin

I did a remake a MIT licensed jquery plugin, it inspired me for the visuals but I made the controller from zero in a vue/nuxt/nuxt-ui style: Clock Timepicker Plugin for jQuery

Demo

Demo on bqsystems.be

License

MIT licensed:

Contributing

This module is made with nuxt-ui components, but not as part of @nuxt/ui. It is not made using tailwind-variants. But the ClockDial.vue part can be used for making your own version of a TimePicker using tailwind-variants and then be incorporated in @nuxt/ui.

The timepicker can also be refactored to whatever tailwindcss based timepicker. It will be a joy for me to see parts of this code—especially ClockDial.vue—being reused in other timepickers! Be creative!

About

Project Info

Source code available on GitHub.

Author

Paul Becue
BQ Systems – Oostende, Belgium
📧 [email protected]