{"_id":"@bw-ui/datepicker-range","_rev":"3-3f5b0c4f387196e101af1f6948b99aa0","name":"@bw-ui/datepicker-range","dist-tags":{"latest":"1.1.2"},"versions":{"1.1.0":{"name":"@bw-ui/datepicker-range","version":"1.1.0","keywords":["datepicker","range","daterange","calendar","presets","dual-calendar","bw-ui"],"author":{"name":"BW UI"},"license":"MIT","_id":"@bw-ui/datepicker-range@1.1.0","maintainers":[{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"}],"homepage":"https://github.com/bw-ui/bw-datepicker","bugs":{"url":"https://github.com/bw-ui/bw-datepicker/issues"},"dist":{"shasum":"778d3cb045942de6b5e64233c3be1cd9224b2338","tarball":"https://registry.npmjs.org/@bw-ui/datepicker-range/-/datepicker-range-1.1.0.tgz","fileCount":6,"integrity":"sha512-/cPaUcfXC5ztFxF1KEMvveUhosW70nDtvXy8fxqjPGQqxTvYYsK9LTEfT41YlY2MmJcuTJLw053ulr8JyaWaLA==","signatures":[{"sig":"MEYCIQDhn1OrPyrpFBJNBNEUwzLyiawT52j4U3nSaq8hgmA90wIhAPg7uz8XtsARfOR1e7lcMaGC7XTDWHoLhc6AARojWAD8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":60458},"main":"dist/bw-range.min.js","type":"module","types":"src/index.d.ts","module":"dist/bw-range.esm.min.js","exports":{".":{"import":"./dist/bw-range.esm.min.js","require":"./dist/bw-range.min.js"},"./css":"./dist/bw-range.min.css"},"gitHead":"30d8915a21fd5e442ea3830e44532446a20dfa3c","scripts":{"build":"node build.js"},"_npmUser":{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"},"repository":{"url":"git+https://github.com/bw-ui/bw-datepicker.git","type":"git"},"_npmVersion":"10.9.3","description":"Range plugin for @bw-ui/datepicker - Date range selection with presets and dual calendar","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.20.0"},"peerDependencies":{"@bw-ui/datepicker":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/datepicker-range_1.1.0_1764510962734_0.26909019572895887","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@bw-ui/datepicker-range","version":"1.1.1","keywords":["datepicker","range","daterange","calendar","presets","dual-calendar","bw-ui"],"author":{"name":"BW UI"},"license":"MIT","_id":"@bw-ui/datepicker-range@1.1.1","maintainers":[{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"}],"homepage":"https://github.com/bw-ui/bw-datepicker","bugs":{"url":"https://github.com/bw-ui/bw-datepicker/issues"},"dist":{"shasum":"e4e406aef8b5394f04bb60e83ddd1ba7ec9142ce","tarball":"https://registry.npmjs.org/@bw-ui/datepicker-range/-/datepicker-range-1.1.1.tgz","fileCount":6,"integrity":"sha512-cwW3zFQHExymhocwvLJ12JsiKlrxoP4EwApoUxbajSgFnk8vY2bYBr2sempLYDocan5e/orRCYpdzVAeAK4VTA==","signatures":[{"sig":"MEYCIQD51j9y3RWOmjYTvRWCLyf+9+ndOJZoB8Q1fvaYi92a6AIhAIBWrJMXWRi46ardpj/GToD4FnmE6RyHb2YsB6mtChxH","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":60572},"main":"dist/bw-range.min.js","type":"module","types":"src/index.d.ts","module":"dist/bw-range.esm.min.js","exports":{".":{"import":"./dist/bw-range.esm.min.js","require":"./dist/bw-range.min.js"},"./css":"./dist/bw-range.min.css"},"gitHead":"30d8915a21fd5e442ea3830e44532446a20dfa3c","scripts":{"build":"node build.js"},"_npmUser":{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"},"repository":{"url":"git+https://github.com/bw-ui/bw-datepicker.git","type":"git"},"_npmVersion":"10.9.3","description":"Range plugin for @bw-ui/datepicker - Date range selection with presets and dual calendar","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.20.0"},"peerDependencies":{"@bw-ui/datepicker":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/datepicker-range_1.1.1_1764516591371_0.5782865767786376","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@bw-ui/datepicker-range","version":"1.1.2","description":"Range plugin for @bw-ui/datepicker - Date range selection with presets and dual calendar","main":"dist/bw-range.min.js","module":"dist/bw-range.esm.min.js","exports":{".":{"import":"./dist/bw-range.esm.min.js","require":"./dist/bw-range.min.js"},"./css":"./dist/bw-range.min.css"},"types":"src/index.d.ts","scripts":{"build":"node build.js"},"keywords":["datepicker","range","daterange","calendar","presets","dual-calendar","bw-ui"],"author":{"name":"BW UI"},"license":"MIT","peerDependencies":{"@bw-ui/datepicker":"^1.0.0"},"devDependencies":{"esbuild":"^0.20.0"},"repository":{"type":"git","url":"git+https://github.com/bw-ui/bw-datepicker.git"},"bugs":{"url":"https://github.com/bw-ui/bw-datepicker/issues"},"homepage":"https://github.com/bw-ui/bw-datepicker","type":"module","_id":"@bw-ui/datepicker-range@1.1.2","gitHead":"30d8915a21fd5e442ea3830e44532446a20dfa3c","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-5d31gVHThKBpf0g8O+vMZf1iDT8wMIJsuFIUOMXwj18+SH8fD0dq9df8NK1pgkpSl0xU2lBc0h6t4NQ7+511ag==","shasum":"ebfe0dce4fc4fb6c22392affb43ea161b7fbef0c","tarball":"https://registry.npmjs.org/@bw-ui/datepicker-range/-/datepicker-range-1.1.2.tgz","fileCount":6,"unpackedSize":60572,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHSqRGQ3nz/S+7b4UhYHZsdyWsJUEJq71eR59+E9qweDAiAovp4UD5NX1bs5l9f10neTgeAQjiCGfVhviTtTmHk5Dg=="}]},"_npmUser":{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"},"directories":{},"maintainers":[{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/datepicker-range_1.1.2_1764517290163_0.36575182880409285"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-30T13:56:02.650Z","modified":"2025-11-30T15:41:30.540Z","1.1.0":"2025-11-30T13:56:02.907Z","1.1.1":"2025-11-30T15:29:51.585Z","1.1.2":"2025-11-30T15:41:30.335Z"},"bugs":{"url":"https://github.com/bw-ui/bw-datepicker/issues"},"author":{"name":"BW UI"},"license":"MIT","homepage":"https://github.com/bw-ui/bw-datepicker","keywords":["datepicker","range","daterange","calendar","presets","dual-calendar","bw-ui"],"repository":{"type":"git","url":"git+https://github.com/bw-ui/bw-datepicker.git"},"description":"Range plugin for @bw-ui/datepicker - Date range selection with presets and dual calendar","maintainers":[{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"}],"readme":"# @bw-ui/datepicker-range\n\nRange plugin for BW DatePicker - Date range selection with presets and validation.\n\n![Version](https://img.shields.io/npm/v/@bw-ui/datepicker-range)\n![License](https://img.shields.io/npm/l/@bw-ui/datepicker-range)\n![Size](https://img.shields.io/bundlephobia/minzip/@bw-ui/datepicker-range)\n\n[Live Demo](https://bw-ui.github.io/bw-datepicker) • [Documentation](https://www.npmjs.com/package/@bw-ui/datepicker-range) • [Core Package](https://www.npmjs.com/package/@bw-ui/datepicker)\n\n## ✨ Features\n\n- 📅 **Range Selection** - Select start and end dates\n- ⚡ **Presets** - Today, Last 7 days, This month, custom presets\n- 📍 **Flexible Position** - Top, bottom, left, right, dropdown\n- ✅ **Validation** - Min/max range constraints\n- 🎨 **Theming** - CSS variables, dark mode support\n- 🔗 **Input Sync** - Sync with check-in/check-out inputs\n- 📆 **View Mode Support** - Works in calendar and week views\n\n## 📦 Installation\n\n```bash\nnpm install @bw-ui/datepicker @bw-ui/datepicker-range\n```\n\n> ⚠️ **Peer Dependency:** Requires `@bw-ui/datepicker` core package\n\n## 🚀 Quick Start\n\n### ES Modules\n\n```javascript\nimport { BWDatePicker } from '@bw-ui/datepicker';\nimport { RangePlugin } from '@bw-ui/datepicker-range';\nimport '@bw-ui/datepicker/css';\nimport '@bw-ui/datepicker-range/css';\n\nconst picker = new BWDatePicker('#date-input').use(RangePlugin, {\n  presets: ['today', 'last7days', 'thisMonth'],\n  presetsPosition: 'left',\n});\n```\n\n### CDN\n\n```html\n<link\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/@bw-ui/datepicker/dist/bw-datepicker.min.css\"\n/>\n<link\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/@bw-ui/datepicker-range/dist/bw-range.min.css\"\n/>\n\n<script src=\"https://unpkg.com/@bw-ui/datepicker/dist/bw-datepicker.min.js\"></script>\n<script src=\"https://unpkg.com/@bw-ui/datepicker-range/dist/bw-range.min.js\"></script>\n\n<script>\n  const picker = new BWDatePicker('#date-input').use(BWRange.RangePlugin, {\n    presets: ['today', 'last7days', 'thisMonth'],\n    presetsPosition: 'left',\n  });\n</script>\n```\n\n## ⚙️ Options\n\n```javascript\n.use(RangePlugin, {\n  // Range Constraints\n  minRange: 1,              // Minimum days (default: 1)\n  maxRange: 30,             // Maximum days (default: null)\n\n  // Presets\n  presets: [],              // Array of preset keys or custom presets\n  presetsPosition: 'left',  // 'left' | 'right' | 'top' | 'bottom' | 'dropdown' | 'none'\n\n  // Display\n  highlightRange: true,     // Highlight days between start/end\n\n  // Input Sync\n  startInput: '#checkin',   // Start date input selector\n  endInput: '#checkout',    // End date input selector\n  format: 'YYYY-MM-DD',     // Date format for inputs\n\n  // Labels\n  startLabel: 'Check-in',   // Placeholder for start input\n  endLabel: 'Check-out',    // Placeholder for end input\n\n  // Behavior\n  closeOnSelect: false,     // Close picker after range complete\n})\n```\n\n### Options Reference\n\n| Option            | Type              | Default        | Description                   |\n| ----------------- | ----------------- | -------------- | ----------------------------- |\n| `minRange`        | `number`          | `1`            | Minimum days required         |\n| `maxRange`        | `number\\|null`    | `null`         | Maximum days allowed          |\n| `presets`         | `array`           | `[]`           | Preset keys or custom presets |\n| `presetsPosition` | `string`          | `'left'`       | Position of presets panel     |\n| `highlightRange`  | `boolean`         | `true`         | Highlight range between dates |\n| `startInput`      | `string\\|Element` | `null`         | Start date input              |\n| `endInput`        | `string\\|Element` | `null`         | End date input                |\n| `format`          | `string`          | `'YYYY-MM-DD'` | Date format for inputs        |\n| `closeOnSelect`   | `boolean`         | `false`        | Close after range complete    |\n\n## 📅 Built-in Presets\n\n| Key           | Label        | Range                 |\n| ------------- | ------------ | --------------------- |\n| `today`       | Today        | Today → Today         |\n| `yesterday`   | Yesterday    | Yesterday → Yesterday |\n| `last7days`   | Last 7 days  | -6 days → Today       |\n| `last30days`  | Last 30 days | -29 days → Today      |\n| `thisWeek`    | This week    | Sunday → Saturday     |\n| `lastWeek`    | Last week    | Last Sun → Last Sat   |\n| `thisMonth`   | This month   | 1st → Last day        |\n| `lastMonth`   | Last month   | 1st → Last day        |\n| `thisQuarter` | This quarter | Q start → Q end       |\n| `lastQuarter` | Last quarter | Q start → Q end       |\n| `thisYear`    | This year    | Jan 1 → Dec 31        |\n| `lastYear`    | Last year    | Jan 1 → Dec 31        |\n\n## 📖 Examples\n\n### Basic Range Selection\n\n```javascript\n.use(RangePlugin, {\n  highlightRange: true,\n})\n```\n\n### With Presets (Left Panel)\n\n```javascript\n.use(RangePlugin, {\n  presets: ['today', 'last7days', 'last30days', 'thisMonth'],\n  presetsPosition: 'left',\n})\n```\n\n### Presets Dropdown\n\n```javascript\n.use(RangePlugin, {\n  presets: ['today', 'last7days', 'thisWeek', 'thisMonth', 'thisQuarter'],\n  presetsPosition: 'dropdown',\n})\n```\n\n### Hotel Booking (Min/Max Nights)\n\n```javascript\n.use(RangePlugin, {\n  minRange: 1,           // Minimum 1 night\n  maxRange: 30,          // Maximum 30 nights\n  startInput: '#checkin',\n  endInput: '#checkout',\n  startLabel: 'Check-in',\n  endLabel: 'Check-out',\n  presets: ['thisWeek', 'thisMonth'],\n  presetsPosition: 'bottom',\n})\n```\n\n### Analytics Date Filter\n\n```javascript\n.use(RangePlugin, {\n  presets: [\n    'today',\n    'yesterday',\n    'last7days',\n    'last30days',\n    'thisMonth',\n    'lastMonth',\n    'thisQuarter',\n  ],\n  presetsPosition: 'left',\n})\n```\n\n### Custom Presets\n\n```javascript\n.use(RangePlugin, {\n  presets: [\n    'today',\n    'last7days',\n    // Custom preset\n    {\n      label: 'Next Weekend',\n      key: 'nextWeekend',\n      getValue: () => {\n        const today = new Date();\n        const dayOfWeek = today.getDay();\n        const daysUntilSat = (6 - dayOfWeek + 7) % 7 || 7;\n        const saturday = new Date(today);\n        saturday.setDate(today.getDate() + daysUntilSat);\n        const sunday = new Date(saturday);\n        sunday.setDate(saturday.getDate() + 1);\n        return [saturday, sunday];\n      }\n    },\n    {\n      label: 'This Pay Period',\n      getValue: () => {\n        const today = new Date();\n        const start = new Date(today.getFullYear(), today.getMonth(), 1);\n        const end = new Date(today.getFullYear(), today.getMonth(), 15);\n        return [start, end];\n      }\n    }\n  ],\n  presetsPosition: 'left',\n})\n```\n\n## 📍 Presets Position\n\n```\n┌─────────────────────────────────────────────────────────┐\n│                    presetsPosition: 'top'               │\n│  [Today] [Last 7 days] [This Month] [This Quarter] →    │\n├─────────────┬───────────────────────────────────────────┤\n│             │                                           │\n│  presets    │              Calendar                     │\n│  Position:  │                                           │\n│  'left'     │         December 2025                     │\n│             │   Su Mo Tu We Th Fr Sa                    │\n│ [Today    ] │       1  2  3  4  5  6                    │\n│ [Last 7d  ] │    7  8  9 10 11 12 13                    │\n│ [This Mon ] │   14 15 16 17 18 19 20                    │\n│ [This Qtr ] │   21 22 23 24 25 26 27                    │\n│             │   28 29 30 31                             │\n│             │                                           │\n├─────────────┴───────────────────────────────────────────┤\n│                 presetsPosition: 'bottom'               │\n│  [Today] [Last 7 days] [This Month] [This Quarter] →    │\n└─────────────────────────────────────────────────────────┘\n\n┌─────────────────────────────────────────────────────────┐\n│  presetsPosition: 'dropdown'                            │\n│  ┌──────────────────┐                                   │\n│  │ This Month     ▼ │  ← Shows selected preset          │\n│  └──────────────────┘                                   │\n│           │                                             │\n│           ▼ (on click)                                  │\n│  ┌──────────────────┐                                   │\n│  │ Today            │                                   │\n│  │ Last 7 days      │                                   │\n│  │ This Month    ✓  │                                   │\n│  │ This Quarter     │                                   │\n│  └──────────────────┘                                   │\n└─────────────────────────────────────────────────────────┘\n```\n\n## 🔌 API Methods\n\nAccess via `picker.getPlugin('range')`:\n\n```javascript\nconst range = picker.getPlugin('range');\n\n// Get current range\nconst { startDate, endDate } = range.getRange();\n\n// Set range programmatically\nrange.setRange(new Date('2025-12-01'), new Date('2025-12-07'));\n\n// Get days/nights count\nrange.getDays(); // 7\nrange.getNights(); // 6\n\n// Apply preset\nrange.applyPreset('thisMonth');\n\n// Get available presets\nrange.getPresets();\n\n// Check selection state\nrange.isSelecting(); // 'start' or 'end'\n\n// Reset selection\nrange.reset();\n```\n\n## 📡 Events\n\n```javascript\nconst picker = new BWDatePicker('#date-input')\n  .use(RangePlugin, { ... });\n\n// Range changed (start or end selected)\npicker.on('range:change', ({ startDate, endDate, selecting }) => {\n  console.log('Range changed:', startDate, endDate);\n  console.log('Now selecting:', selecting); // 'start' or 'end'\n});\n\n// Range complete (both dates selected)\npicker.on('range:complete', ({ startDate, endDate, days, nights }) => {\n  console.log('Range complete!');\n  console.log(`${nights} nights selected`);\n});\n\n// Preset applied\npicker.on('range:preset', ({ preset, startDate, endDate }) => {\n  console.log('Preset applied:', preset);\n});\n\n// Validation error\npicker.on('range:error', ({ error, preset }) => {\n  console.log('Error:', error);\n});\n\n// Range reset\npicker.on('range:reset', () => {\n  console.log('Range cleared');\n});\n```\n\n## 🎨 Theming\n\n### CSS Variables\n\n```css\n.bw-datepicker--range {\n  /* Primary color (start/end dates, selected preset) */\n  --bw-range-primary: #3b82f6;\n  --bw-range-primary-hover: #2563eb;\n\n  /* Range highlight */\n  --bw-range-in-bg: rgba(59, 130, 246, 0.15);\n  --bw-range-hover-bg: rgba(59, 130, 246, 0.1);\n\n  /* Error message */\n  --bw-error-bg: #fee2e2;\n  --bw-error-color: #dc2626;\n  --bw-error-border: #fecaca;\n\n  /* Presets panel */\n  --bw-preset-bg: #f9fafb;\n  --bw-preset-border: #e5e7eb;\n  --bw-preset-btn-bg: #fff;\n  --bw-preset-btn-color: inherit;\n  --bw-preset-btn-hover-bg: #eff6ff;\n  --bw-preset-btn-hover-color: #3b82f6;\n}\n```\n\n### With Theming Plugin\n\n```javascript\nimport { ThemingPlugin } from '@bw-ui/datepicker-theming';\nimport { RangePlugin } from '@bw-ui/datepicker-range';\n\nnew BWDatePicker('#date-input')\n  .use(ThemingPlugin, {\n    theme: 'light',\n    customVars: {\n      '--bw-range-primary': '#10b981', // Green theme\n      '--bw-range-in-bg': 'rgba(16, 185, 129, 0.15)',\n    },\n  })\n  .use(RangePlugin, {\n    presets: ['today', 'last7days', 'thisMonth'],\n  });\n```\n\n### Dark Mode\n\nDark mode is automatically supported via:\n\n- `[data-bw-theme=\"dark\"]` attribute (Theming plugin)\n- `.bw-datepicker--dark` class (manual)\n\n## 📆 View Mode Support\n\nThe Range Plugin automatically handles different view modes:\n\n| View Mode | Range Display |\n|-----------|---------------|\n| `calendar` | ✅ Shows range highlighting |\n| `week` | ✅ Shows range highlighting |\n| `month` | ❌ Presets hidden (month picker) |\n| `year` | ❌ Presets hidden (year picker) |\n\nWhen user switches to month or year picker view, presets are automatically hidden and shown again when returning to calendar/week view.\n\n```javascript\n// Works in week view too\nconst picker = new BWDatePicker('#date-input', {\n  defaultViewMode: 'week',\n}).use(RangePlugin, {\n  presets: ['thisWeek', 'lastWeek'],\n  presetsPosition: 'top',\n});\n```\n\n## 🔌 Combining with Other Plugins\n\n```javascript\nimport { BWDatePicker } from '@bw-ui/datepicker';\nimport { ThemingPlugin } from '@bw-ui/datepicker-theming';\nimport { RangePlugin } from '@bw-ui/datepicker-range';\nimport { DataPlugin } from '@bw-ui/datepicker-data';\n\nconst picker = new BWDatePicker('#date-input')\n  .use(ThemingPlugin, { theme: 'auto' })\n  .use(DataPlugin, {\n    data: {\n      '2025-12-25': { price: 299, status: 'limited' },\n      '2025-12-31': { price: 499, status: 'sold-out' },\n    },\n    renderDay: (date, data) => (data ? `$${data.price}` : ''),\n  })\n  .use(RangePlugin, {\n    minRange: 2,\n    maxRange: 14,\n    presets: ['thisWeek', 'thisMonth'],\n    presetsPosition: 'left',\n  });\n```\n\n## 📁 What's Included\n\n```\ndist/\n├── bw-range.min.js       # IIFE build (for <script>)\n├── bw-range.esm.min.js   # ESM build (for import)\n└── bw-range.min.css      # Styles\n```\n\n## 🔗 Related Packages\n\n| Package                                                                                          | Description           |\n| ------------------------------------------------------------------------------------------------ | --------------------- |\n| [@bw-ui/datepicker](https://www.npmjs.com/package/@bw-ui/datepicker)                             | Core (required)       |\n| [@bw-ui/datepicker-theming](https://www.npmjs.com/package/@bw-ui/datepicker-theming)             | Dark mode & themes    |\n| [@bw-ui/datepicker-data](https://www.npmjs.com/package/@bw-ui/datepicker-data)                   | Prices & availability |\n| [@bw-ui/datepicker-positioning](https://www.npmjs.com/package/@bw-ui/datepicker-positioning)     | Auto positioning      |\n| [@bw-ui/datepicker-accessibility](https://www.npmjs.com/package/@bw-ui/datepicker-accessibility) | Keyboard nav          |\n| [@bw-ui/datepicker-mobile](https://www.npmjs.com/package/@bw-ui/datepicker-mobile)               | Touch support         |\n\n## 📄 License\n\nMIT © [BW UI](https://github.com/bw-ui)\n\n## 🐛 Issues\n\nFound a bug? [Report it here](https://github.com/bw-ui/bw-datepicker/issues)\n","readmeFilename":"README.md"}