{"_id":"@cristiancananau/vue-material-datetime-picker","_rev":"2-bd4341fc515e836f8bd88d02fb4fb231","name":"@cristiancananau/vue-material-datetime-picker","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@cristiancananau/vue-material-datetime-picker","version":"1.0.0","keywords":["vue","vue3","datepicker","datetimepicker","timepicker","material-design","vite"],"author":{"name":"Cristian Cananau"},"license":"MIT","_id":"@cristiancananau/vue-material-datetime-picker@1.0.0","maintainers":[{"name":"cristiancananau","email":"cananaucristian@gmail.com"}],"homepage":"https://github.com/cristiancananau/vue-material-datetime-picker#readme","bugs":{"url":"https://github.com/cristiancananau/vue-material-datetime-picker/issues"},"dist":{"shasum":"410304ce9a4346c2fb45e8d1cc1b7cf3444167f1","tarball":"https://registry.npmjs.org/@cristiancananau/vue-material-datetime-picker/-/vue-material-datetime-picker-1.0.0.tgz","fileCount":6,"integrity":"sha512-V5qZM9MER0sHwcLlzqTiIfS/T5572HJTBzA5XsM6JFmCFgyhawZ8ezPtxiGS+tTJzeJG7Ugyot3Dkwxda2Z2KQ==","signatures":[{"sig":"MEQCIGHlovItKXez85RZk/7XpqWUFGJvEJz75ZnJk21aaiQRAiAkhZeEcGf/pT0GTRyz6kLpk3nmD4w3DKwxzZ/xTWFXnA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":68663},"main":"./dist/vue-material-datetime-picker.umd.cjs","type":"module","module":"./dist/vue-material-datetime-picker.js","exports":{".":{"import":"./dist/vue-material-datetime-picker.js","require":"./dist/vue-material-datetime-picker.umd.cjs"},"./style.css":"./dist/style.css"},"gitHead":"3a79783876ba3dc350693c70a9f46e766a66a595","scripts":{"dev":"vite","test":"vitest run","build":"vite build","preview":"vite preview","test:watch":"vitest","prepublishOnly":"npm test && npm run build"},"_npmUser":{"name":"cristiancananau","email":"cananaucristian@gmail.com"},"repository":{"url":"git+https://github.com/cristiancananau/vue-material-datetime-picker.git","type":"git"},"_npmVersion":"11.17.0","description":"Material-design date and time picker components for Vue 3","directories":{},"sideEffects":["*.css","**/*.css"],"_nodeVersion":"26.4.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.29","vite":"^8.1.4","jsdom":"^29.1.1","moment":"^2.30.1","vitest":"^4.1.10","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^6.0.7"},"peerDependencies":{"vue":"^3.4.0","moment":"^2.29.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-material-datetime-picker_1.0.0_1783612424584_0.4989245321280922","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@cristiancananau/vue-material-datetime-picker","version":"1.0.1","description":"Material-design date and time picker components for Vue 3","license":"MIT","author":{"name":"Cristian Cananau"},"type":"module","keywords":["vue","vue3","datepicker","datetimepicker","timepicker","material-design","vite"],"repository":{"type":"git","url":"git+https://github.com/cristiancananau/vue-material-datetime-picker.git"},"bugs":{"url":"https://github.com/cristiancananau/vue-material-datetime-picker/issues"},"homepage":"https://github.com/cristiancananau/vue-material-datetime-picker#readme","sideEffects":["*.css","**/*.css"],"main":"./dist/vue-material-datetime-picker.umd.cjs","module":"./dist/vue-material-datetime-picker.js","exports":{".":{"import":"./dist/vue-material-datetime-picker.js","require":"./dist/vue-material-datetime-picker.umd.cjs"},"./style.css":"./dist/style.css"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview","test":"vitest run","test:watch":"vitest","prepublishOnly":"npm test && npm run build"},"peerDependencies":{"moment":"^2.29.0","vue":"^3.4.0"},"devDependencies":{"@vitejs/plugin-vue":"^6.0.7","@vue/test-utils":"^2.4.6","jsdom":"^29.1.1","moment":"^2.30.1","vite":"^8.1.4","vitest":"^4.1.10","vue":"^3.4.29"},"gitHead":"812506f7a89d064061c295602d4058763822d509","_id":"@cristiancananau/vue-material-datetime-picker@1.0.1","_nodeVersion":"26.4.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-ns57mHLbHdcM7qjjiJqEa3BG0p7VrUZxE2N4QH/AX3U56cPZ4T22a25qmPPBCMK022tBsH+dvtmKCNp3ZM8fzA==","shasum":"374d074fe701ecd70aac1d1bf01cbd6d8ef3c740","tarball":"https://registry.npmjs.org/@cristiancananau/vue-material-datetime-picker/-/vue-material-datetime-picker-1.0.1.tgz","fileCount":6,"unpackedSize":68748,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDePBbC3s+PiynYA+q+CPTk6P5RESwyZZhW2eOLymxcCwIgDfLKX/Gn3EOjN+k0HlVYXyc/Yp/n5s2or2ekE4jNbtA="}]},"_npmUser":{"name":"cristiancananau","email":"cananaucristian@gmail.com"},"directories":{},"maintainers":[{"name":"cristiancananau","email":"cananaucristian@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-material-datetime-picker_1.0.1_1783615459720_0.4080038009376523"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-09T15:53:43.416Z","modified":"2026-07-09T16:44:19.975Z","1.0.0":"2026-07-09T15:53:44.704Z","1.0.1":"2026-07-09T16:44:19.876Z"},"bugs":{"url":"https://github.com/cristiancananau/vue-material-datetime-picker/issues"},"author":{"name":"Cristian Cananau"},"license":"MIT","homepage":"https://github.com/cristiancananau/vue-material-datetime-picker#readme","keywords":["vue","vue3","datepicker","datetimepicker","timepicker","material-design","vite"],"repository":{"type":"git","url":"git+https://github.com/cristiancananau/vue-material-datetime-picker.git"},"description":"Material-design date and time picker components for Vue 3","maintainers":[{"name":"cristiancananau","email":"cananaucristian@gmail.com"}],"readme":"# vue-material-datetime-picker\n\n[![CI](https://github.com/cristiancananau/vue-material-datetime-picker/actions/workflows/ci.yml/badge.svg)](https://github.com/cristiancananau/vue-material-datetime-picker/actions/workflows/ci.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\n\nA Material-design date & time picker for **Vue 3** with calendar, clock, range,\nlocale, and controlled-input workflows. Only [moment](https://momentjs.com/) is\nrequired as a peer dependency.\n\n| Calendar | 24h clock | 12h AM/PM |\n| --- | --- | --- |\n| ![calendar view](assets/img/picker-calendar.png) | ![clock view](assets/img/picker-clock.png) | ![short time view](assets/img/picker-shorttime.png) |\n\n## Features\n\n- 📅 Date, time, or combined date & time picking (calendar → hour clock → minute clock)\n- 🕐 SVG analog clock with 24-hour dual ring or 12-hour AM/PM mode (`shortTime`)\n- 🌍 i18n: moment drives month/weekday names; built-in button texts for **en** (default), **de**, **fr**, **es** — extendable\n- 📆 `minDate` / `maxDate` limits enforced per day, hour, and minute\n- 🚫 Disable weekdays (`disabledDays`, ISO weekday numbers)\n- 🗓 Year picker, month-only mode, week start day, Now/Clear buttons, auto-advance on click\n- 🎨 Themeable `vmdp-*` CSS class hooks and CSS variables\n- 🧩 Use as a drop-in input (`<MaterialDatetimeInput>`) or a fully controlled modal (`<MaterialDatetimePicker>`)\n\n## Installation\n\n```bash\nnpm install @cristiancananau/vue-material-datetime-picker moment\n```\n\n## Quick start\n\nRegister the plugin (registers both components globally):\n\n```js\n// main.js\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport MaterialDatetimePicker from '@cristiancananau/vue-material-datetime-picker'\nimport '@cristiancananau/vue-material-datetime-picker/style.css'\n\ncreateApp(App)\n  .use(MaterialDatetimePicker) // options: { lang: 'de', locales: { … } }\n  .mount('#app')\n```\n\nThen use the input wrapper. It shows a readonly input and opens the picker on focus:\n\n```vue\n<template>\n  <MaterialDatetimeInput v-model=\"value\" format=\"YYYY-MM-DD HH:mm\" placeholder=\"Pick date & time…\" />\n</template>\n\n<script>\nexport default {\n  data() {\n    return { value: '' } // v-model is a formatted string, e.g. \"2026-07-24 18:45\"\n  }\n}\n</script>\n```\n\nOr import the components individually without the plugin:\n\n```js\nimport { MaterialDatetimePicker, MaterialDatetimeInput } from '@cristiancananau/vue-material-datetime-picker'\nimport '@cristiancananau/vue-material-datetime-picker/style.css'\n```\n\n### Controlled modal\n\nMount the picker yourself when you need full control — it commits to `v-model`\nonly when the user confirms with OK:\n\n```vue\n<template>\n  <button @click=\"open = true\">Open picker</button>\n  <MaterialDatetimePicker\n    v-if=\"open\"\n    v-model=\"value\"\n    format=\"YYYY-MM-DD HH:mm\"\n    @close=\"open = false\"\n  />\n</template>\n\n<script>\nexport default {\n  data() {\n    return { open: false, value: '' }\n  }\n}\n</script>\n```\n\n## Examples\n\nDate only:\n\n```html\n<MaterialDatetimeInput v-model=\"date\" :time=\"false\" format=\"YYYY-MM-DD\" />\n```\n\nTime only with a 12-hour clock and AM/PM buttons:\n\n```html\n<MaterialDatetimeInput v-model=\"time\" :date=\"false\" short-time format=\"hh:mm A\" />\n```\n\nLimits and disabled weekends (ISO weekdays: 1 = Monday … 7 = Sunday):\n\n```html\n<MaterialDatetimeInput\n  v-model=\"value\"\n  :time=\"false\"\n  format=\"YYYY-MM-DD\"\n  min-date=\"2026-07-01\"\n  max-date=\"2026-07-31\"\n  :disabled-days=\"[6, 7]\"\n/>\n```\n\nGerman UI, Monday week start, Now/Clear buttons, auto-advance on click:\n\n```html\n<MaterialDatetimeInput\n  v-model=\"value\"\n  lang=\"de\"\n  :week-start=\"1\"\n  now-button\n  clear-button\n  switch-on-click\n  format=\"DD.MM.YYYY HH:mm\"\n/>\n```\n\nA runnable demo with all of these lives in [`demo/`](demo/App.vue) — start it with `npm run dev`.\n\n## Props\n\nBoth components accept the same props (`MaterialDatetimeInput` additionally takes `placeholder`).\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `modelValue` (v-model) | `String` | `''` | The value as a formatted string (per `format`). Committed on OK. |\n| `date` | `Boolean` | `true` | Show the calendar step. |\n| `time` | `Boolean` | `true` | Show the clock steps (hours → minutes). |\n| `format` | `String` | `'YYYY-MM-DD'` | moment format used to parse and emit the value. |\n| `lang` | `String` | `'en'` | Language for month/weekday names (moment locale) and button texts. |\n| `minDate` | `String \\| Date \\| moment` | `null` | Earliest selectable date/time (strings parsed with `format`). |\n| `maxDate` | `String \\| Date \\| moment` | `null` | Latest selectable date/time. |\n| `currentDate` | `String \\| Date \\| moment` | `null` | Initial date shown when `modelValue` is empty. |\n| `weekStart` | `Number` | `0` | First day of the week (0 = Sunday, 1 = Monday, …). |\n| `disabledDays` | `Number[]` | `[]` | ISO weekdays that cannot be picked (1 = Mon … 7 = Sun). |\n| `shortTime` | `Boolean` | `false` | 12-hour clock with AM/PM instead of the 24-hour dual ring. |\n| `clearButton` | `Boolean` | `false` | Show a Clear button (emits `''` and closes). |\n| `nowButton` | `Boolean` | `false` | Show a Now button (jumps to the current date/time). |\n| `switchOnClick` | `Boolean` | `false` | Auto-advance to the next step 200 ms after a selection. |\n| `monthPicker` | `Boolean` | `false` | Hide the day grid — pick month/year only. |\n| `yearPicker` | `Boolean` | `true` | Allow opening the year list by clicking the year. |\n| `okText` / `cancelText` / `clearText` / `nowText` | `String` | from locale | Override individual button texts. |\n| `placeholder` (input only) | `String` | `''` | Placeholder for the readonly input. |\n\n## Events\n\n| Event | Payload | Description |\n| --- | --- | --- |\n| `update:modelValue` | `String` | The formatted value on OK (or `''` on Clear). |\n| `open` | — | Picker was opened. |\n| `close` | — | Picker was closed (OK, Cancel, ✕, ESC, or backdrop click). |\n| `date-selected` | `moment` | A day was clicked in the calendar. |\n| `year-selected` | `moment` | A year was picked from the year list. |\n\n## Internationalisation\n\nTwo things are localised:\n\n1. **Month and weekday names** come from moment. Import the moment locale(s) you\n   need once in your app and set `lang`:\n\n   ```js\n   import moment from 'moment'\n   import 'moment/dist/locale/de'\n   moment.locale('en') // keep the global default explicit\n   ```\n\n2. **Button texts** (`OK`, `Cancel`, `Clear`, `Now`) are built in for `en`, `de`,\n   `fr`, `es`. English is the default and the fallback for missing keys.\n\nSet a default language and add your own translations at install time:\n\n```js\napp.use(MaterialDatetimePicker, {\n  lang: 'nl',\n  locales: {\n    nl: { ok: 'OK', cancel: 'Annuleren', clear: 'Wissen', now: 'Nu' }\n  }\n})\n```\n\nThe `lang` prop on a component overrides the plugin default, and the\n`okText`/`cancelText`/`clearText`/`nowText` props override everything.\n\n## Theming\n\nThe picker ships with an indigo/blue palette and exposes stable `vmdp-*` class\nhooks plus CSS variables for every color in it — override any of them on `.vmdp`.\nFor example, a teal theme:\n\n```css\n.vmdp {\n  --vmdp-primary: #00695c;\n  --vmdp-accent: #10b981;\n  --vmdp-accent-soft: #d9f5ea;\n  --vmdp-primary-hover: rgba(0, 105, 92, 0.10);\n  --vmdp-clock-face: #e8f2f0;\n}\n```\n\n## Development\n\n```bash\nnpm install\nnpm run dev    # demo app at http://localhost:5173\nnpm test       # Vitest unit tests\nnpm run build  # library build to dist/\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}