{"_id":"@davmixcool/litepie-datepicker","_rev":"2-1ef082e6181a52d2f7a89f1014f440b8","name":"@davmixcool/litepie-datepicker","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@davmixcool/litepie-datepicker","version":"0.1.0","keywords":["litepie-datepicker","vue-datepicker","vue-daterangepicker","vue-daterange-picker","tailwind-datepicker","tailwind-daterange-picker"],"author":{"url":"https://vinayakkulkarni.dev","name":"Vinayak Kulkarni","email":"inbox.vinayak@gmail.com"},"license":"MIT","_id":"@davmixcool/litepie-datepicker@0.1.0","maintainers":[{"name":"davmixcool","email":"davmixcool@gmail.com"}],"contributors":[{"url":"https://github.com/kenhyuwa","name":"kenhyuwa","email":"wahyu.dhiraashandy8@gmail.com"}],"homepage":"https://litepie.com","bugs":{"url":"https://github.com/vinayakkulkarni/litepie-datepicker/issues","email":"wahyu.dhiraashandy8@gmail.com"},"dist":{"shasum":"c1b06741c52c94f939a40d72d0a6dd6f57e49a23","tarball":"https://registry.npmjs.org/@davmixcool/litepie-datepicker/-/litepie-datepicker-0.1.0.tgz","fileCount":6,"integrity":"sha512-HmgCXLVzPt2Y50ui8aQ1vr0jSP0lQ/Qf5ryssyD3vxQ/GKqGfa9dOCHktar6vgRiW8LV2htPLfqRQxSQysOI9Q==","signatures":[{"sig":"MEQCIHKGB5kM6qQLXqVbzG76YRRn78BQV3IoHifgcb9/17mBAiAO53JBmS9/qu91D6dT3BwftrzgStcTd1vOqRHKHwpwxQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":240078},"main":"dist/litepie-datepicker.ssr.js","unpkg":"dist/litepie-datepicker.min.js","module":"dist/litepie-datepicker.esm.js","browser":"dist/litepie-datepicker.esm.js","engines":{"node":">=12"},"gitHead":"a13778d2438642b979f594e40f6cd3f61496abfc","private":false,"scripts":{"tw":"npx tailwind build ./docs/src/styles.css -o ./docs/dist/css/prims.css && cp -r ./docs/public/img ./docs/dist/img && cp ./docs/public/favicon.ico ./docs/dist","lint":"eslint --fix","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","serve":"vue-cli-service serve","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:doc":"vue-cli-service build && npm run tw","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"},"_npmUser":{"name":"davmixcool","email":"davmixcool@gmail.com"},"repository":{"url":"git+https://github.com/vinayakkulkarni/litepie-datepicker.git","type":"git"},"_npmVersion":"10.8.2","description":"A date range picker component for Vue.js and Tailwind CSS, dependent to day.js","directories":{},"sideEffects":false,"_nodeVersion":"18.20.8","_hasShrinkwrap":false,"devDependencies":{"vue":"2.7.16","dayjs":"^1.10.4","rollup":"^2.42.3","postcss":"^8.2.8","prismjs":"^1.23.0","minimist":"^1.2.5","cross-env":"^7.0.3","vue-router":"^3.5.1","@babel/core":"^7.13.10","tailwindcss":"npm:@tailwindcss/postcss7-compat@^2.0.3","autoprefixer":"^10.2.5","@vue/cli-service":"^4.5.12","@babel/preset-env":"^7.13.10","rollup-plugin-vue":"5.1.6","@vue/cli-plugin-pwa":"^4.5.12","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","rollup-plugin-terser":"^7.0.2","@vue/cli-plugin-babel":"^4.5.12","rollup-plugin-postcss":"^4.0.0","vue-template-compiler":"2.7.16","@rollup/plugin-replace":"^2.4.1","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","@rollup/plugin-commonjs":"^17.1.0","@rollup/plugin-node-resolve":"^11.2.0","@tailwindcss/postcss7-compat":"^2.0.3"},"peerDependencies":{"vue":"^2.7.0","dayjs":"^1.10.4","tailwindcss":"^2.0.4"},"_npmOperationalInternal":{"tmp":"tmp/litepie-datepicker_0.1.0_1768596354241_0.37084851096441973","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@davmixcool/litepie-datepicker","version":"0.1.1","description":"A date range picker component for Vue.js and Tailwind CSS, dependent to day.js","main":"dist/litepie-datepicker.ssr.js","browser":"dist/litepie-datepicker.esm.js","module":"dist/litepie-datepicker.esm.js","unpkg":"dist/litepie-datepicker.min.js","keywords":["litepie-datepicker","vue-datepicker","vue-daterangepicker","vue-daterange-picker","tailwind-datepicker","tailwind-daterange-picker"],"author":{"name":"Vinayak Kulkarni","email":"inbox.vinayak@gmail.com","url":"https://vinayakkulkarni.dev"},"contributors":[{"name":"David Oti","email":"hello@davidoti.com","url":"https://github.com/davmixcool"},{"name":"kenhyuwa","email":"wahyu.dhiraashandy8@gmail.com","url":"https://github.com/kenhyuwa"}],"license":"MIT","private":false,"homepage":"https://github.com/davmixcool/litepie-datepicker","repository":{"type":"git","url":"git+https://github.com/davmixcool/litepie-datepicker.git"},"bugs":{"url":"https://github.com/davmixcool/litepie-datepicker/issues","email":"hello@davidoti.com"},"sideEffects":false,"scripts":{"serve":"vue-cli-service serve","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","build:doc":"vue-cli-service build && npm run tw","tw":"npx tailwind build ./docs/src/styles.css -o ./docs/dist/css/prims.css && cp -r ./docs/public/img ./docs/dist/img && cp ./docs/public/favicon.ico ./docs/dist","lint":"eslint --fix"},"devDependencies":{"@babel/core":"^7.13.10","@babel/preset-env":"^7.13.10","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^17.1.0","@rollup/plugin-node-resolve":"^11.2.0","@rollup/plugin-replace":"^2.4.1","@tailwindcss/postcss7-compat":"^2.0.3","@vue/cli-plugin-babel":"^4.5.12","@vue/cli-plugin-pwa":"^4.5.12","@vue/cli-service":"^4.5.12","autoprefixer":"^10.2.5","cross-env":"^7.0.3","dayjs":"^1.10.4","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","minimist":"^1.2.5","postcss":"^8.2.8","prismjs":"^1.23.0","rollup":"^2.42.3","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-vue":"5.1.6","tailwindcss":"npm:@tailwindcss/postcss7-compat@^2.0.3","vue":"2.7.16","vue-router":"^3.5.1","vue-template-compiler":"2.7.16"},"peerDependencies":{"dayjs":"^1.10.4","tailwindcss":"^2.0.4","vue":"^2.7.0"},"engines":{"node":">=12"},"_id":"@davmixcool/litepie-datepicker@0.1.1","gitHead":"bf7b980dd998707b03949986a5dd898bc55cdca8","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-oczyAMLsgjT0QHwmRSQ7xqE2YeUKpPi/XgJ/ReECnextBO764h4hJQMdTQBodhT7+Enex2q0UwCqU13DA+W8rg==","shasum":"43973e285c27e51fa4a142a0bab6f5bc44e70bf2","tarball":"https://registry.npmjs.org/@davmixcool/litepie-datepicker/-/litepie-datepicker-0.1.1.tgz","fileCount":6,"unpackedSize":240208,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD5PhB8UAQ+JUY1my8lxRcGagtXJVHjXU1a2NQYBA1h5gIgLKEdmyeA/q+Q7DKWWPcUJoNrCE/MNMtkrvf4Udx2DS4="}]},"_npmUser":{"name":"davmixcool","email":"davmixcool@gmail.com"},"directories":{},"maintainers":[{"name":"davmixcool","email":"davmixcool@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/litepie-datepicker_0.1.1_1768627790527_0.22096214259963065"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-16T20:45:54.108Z","modified":"2026-01-17T05:29:50.823Z","0.1.0":"2026-01-16T20:45:54.388Z","0.1.1":"2026-01-17T05:29:50.731Z"},"bugs":{"url":"https://github.com/davmixcool/litepie-datepicker/issues","email":"hello@davidoti.com"},"author":{"name":"Vinayak Kulkarni","email":"inbox.vinayak@gmail.com","url":"https://vinayakkulkarni.dev"},"license":"MIT","homepage":"https://github.com/davmixcool/litepie-datepicker","keywords":["litepie-datepicker","vue-datepicker","vue-daterangepicker","vue-daterange-picker","tailwind-datepicker","tailwind-daterange-picker"],"repository":{"type":"git","url":"git+https://github.com/davmixcool/litepie-datepicker.git"},"description":"A date range picker component for Vue.js and Tailwind CSS, dependent to day.js","contributors":[{"name":"David Oti","email":"hello@davidoti.com","url":"https://github.com/davmixcool"},{"name":"kenhyuwa","email":"wahyu.dhiraashandy8@gmail.com","url":"https://github.com/kenhyuwa"}],"maintainers":[{"name":"davmixcool","email":"davmixcool@gmail.com"}],"readme":"

\n \n \"Litepie\n

\n Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent on day.js.\n

\n\n---\n\n## Features\n\n- Date range picker or single date picker\n- Customizable shortcuts\n- Dark mode support\n- Tailwind CSS styling\n- Vue 2.7 Composition API support\n- Customizable date formatting via day.js\n- Disable specific dates\n- Multiple value formats (Array, Object, String)\n\n## Requirements\n\n- Vue 2.7+\n- Tailwind CSS 2.x\n- day.js 1.10+\n\n## Installation\n\n```bash\nnpm install @davmixcool/litepie-datepicker\n# or\nyarn add @davmixcool/litepie-datepicker\n```\n\n### Peer Dependencies\n\nMake sure you have the following peer dependencies installed:\n\n```bash\nnpm install vue@^2.7.0 dayjs@^1.10.4 tailwindcss@^2.0.4\n```\n\n## Configuration\n\n### Tailwind CSS Configuration\n\nAdd the datepicker to your `tailwind.config.js` content/purge configuration:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n content: [\n // ... your other content paths\n './node_modules/@davmixcool/litepie-datepicker/**/*.js'\n ],\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n // Custom colors for the datepicker\n 'litepie-primary': {\n 50: '#f5f3ff',\n 100: '#ede9fe',\n 200: '#ddd6fe',\n 300: '#c4b5fd',\n 400: '#a78bfa',\n 500: '#8b5cf6',\n 600: '#7c3aed',\n 700: '#6d28d9',\n 800: '#5b21b6',\n 900: '#4c1d95'\n },\n 'litepie-secondary': {\n 50: '#f9fafb',\n 100: '#f3f4f6',\n 200: '#e5e7eb',\n 300: '#d1d5db',\n 400: '#9ca3af',\n 500: '#6b7280',\n 600: '#4b5563',\n 700: '#374151',\n 800: '#1f2937',\n 900: '#111827'\n }\n }\n }\n }\n};\n```\n\n## Usage\n\n### Basic Usage\n\n```vue\n\n\n\n```\n\n### With Custom Formatter\n\n```vue\n\n\n\n```\n\n### Single Date Picker\n\n```vue\n\n\n\n```\n\n### With Custom Shortcuts\n\n```vue\n\n\n\n```\n\n### Disable Specific Dates\n\n```vue\n\n\n\n```\n\n### Using Object Value Format\n\n```vue\n\n\n\n```\n\n### With Manual Apply Button\n\n```vue\n\n\n\n```\n\n### With Custom Slot\n\n```vue\n\n\n\n```\n\n## Nuxt 2 Usage\n\n### Installation\n\n```bash\nnpm install @davmixcool/litepie-datepicker\n```\n\n### Create a Plugin\n\nCreate a plugin file `plugins/litepie-datepicker.js`:\n\n```js\nimport Vue from 'vue';\nimport LitepieDatepicker from '@davmixcool/litepie-datepicker';\n\nVue.component('LitepieDatepicker', LitepieDatepicker);\n```\n\n### Register the Plugin\n\nAdd the plugin to your `nuxt.config.js`:\n\n```js\nexport default {\n // ...\n plugins: [\n { src: '~/plugins/litepie-datepicker.js', mode: 'client' }\n ],\n build: {\n transpile: ['@davmixcool/litepie-datepicker']\n }\n};\n```\n\n### Configure Tailwind CSS\n\nUpdate your `tailwind.config.js`:\n\n```js\nmodule.exports = {\n content: [\n // ... your other content paths\n './node_modules/@davmixcool/litepie-datepicker/**/*.js'\n ],\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n 'litepie-primary': {\n 50: '#f5f3ff',\n 100: '#ede9fe',\n 200: '#ddd6fe',\n 300: '#c4b5fd',\n 400: '#a78bfa',\n 500: '#8b5cf6',\n 600: '#7c3aed',\n 700: '#6d28d9',\n 800: '#5b21b6',\n 900: '#4c1d95'\n },\n 'litepie-secondary': {\n 50: '#f9fafb',\n 100: '#f3f4f6',\n 200: '#e5e7eb',\n 300: '#d1d5db',\n 400: '#9ca3af',\n 500: '#6b7280',\n 600: '#4b5563',\n 700: '#374151',\n 800: '#1f2937',\n 900: '#111827'\n }\n }\n }\n }\n};\n```\n\n### Usage in Components\n\nUse in your Vue components with `client-only` wrapper:\n\n```vue\n\n\n\n```\n\n### Using with Composition API in Nuxt 2\n\nIf you want to use the Composition API syntax in Nuxt 2:\n\n```vue\n\n\n\n```\n\n### Single Date Picker in Nuxt 2\n\n```vue\n\n\n\n```\n\n### With Custom Shortcuts in Nuxt 2\n\n```vue\n\n\n\n```\n\n### Disable Dates in Nuxt 2\n\n```vue\n\n\n\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `v-model` | `Array`, `Object`, `String` | `[]` | The selected date value |\n| `asSingle` | `Boolean` | `false` | Use as a single date picker instead of range |\n| `useRange` | `Boolean` | `false` | Enable range selection with single calendar |\n| `placeholder` | `Boolean`, `String` | `false` | Custom placeholder text |\n| `separator` | `String` | `' ~ '` | Separator between start and end dates |\n| `formatter` | `Object` | `{ date: 'YYYY-MM-DD HH:mm:ss', month: 'MMM' }` | Date format options |\n| `autoApply` | `Boolean` | `true` | Automatically apply selection without confirmation button |\n| `shortcuts` | `Boolean`, `Function` | `true` | Show shortcuts or provide custom shortcuts function |\n| `disableDate` | `Boolean`, `Array`, `Function` | `false` | Disable specific dates |\n| `disableInRange` | `Boolean` | `true` | Disable dates that are in the selected range |\n| `trigger` | `String` | `null` | Element ID that triggers the datepicker |\n| `overlay` | `Boolean` | `false` | Show overlay behind datepicker |\n| `startFrom` | `Object`, `String` | `new Date()` | Initial date to show in calendar |\n| `i18n` | `String` | `'en'` | Locale for day.js |\n\n## Formatter Object\n\nThe `formatter` prop accepts an object with the following properties:\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `date` | `String` | `'YYYY-MM-DD HH:mm:ss'` | Date format (follows day.js format) |\n| `month` | `String` | `'MMM'` | Month format in calendar header |\n\n### Common Date Formats\n\n| Format | Example |\n|--------|---------|\n| `YYYY-MM-DD` | 2024-01-15 |\n| `DD/MM/YYYY` | 15/01/2024 |\n| `MM/DD/YYYY` | 01/15/2024 |\n| `DD MMM YYYY` | 15 Jan 2024 |\n| `MMMM DD, YYYY` | January 15, 2024 |\n| `YYYY-MM-DD HH:mm:ss` | 2024-01-15 00:00:00 |\n\n## Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `input` | `Array`, `Object`, `String` | Emitted when the date selection changes |\n\n## Slots\n\n### Default Slot\n\nThe default slot allows you to customize the trigger element.\n\n| Slot Prop | Type | Description |\n|-----------|------|-------------|\n| `value` | `String` | The formatted date value |\n| `placeholder` | `String` | The placeholder text |\n\n## Theming\n\n### Light Mode\n\n

\n \"Light\n

\n\n### Dark Mode\n\nThe datepicker supports dark mode through Tailwind CSS. Add the `dark` class to a parent element:\n\n```html\n
\n \n
\n```\n\n

\n \"Dark\n

\n\n### Custom Colors\n\nYou can customize the datepicker colors by extending your Tailwind CSS theme with custom `litepie-primary` and `litepie-secondary` color palettes (see Configuration section above).\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- IE 11+ (with appropriate polyfills)\n\n## Changelog\n\nAll notable changes to this project will be documented in the [CHANGELOG](CHANGELOG.md).\n\n## License\n\nThe [MIT](LICENSE) License. Please [see](http://opensource.org/licenses/MIT) for more information.\n\n## Credits\n\n- [Vue.js](https://vuejs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [day.js](https://day.js.org/)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n","readmeFilename":"README.md"}