{"id":21966421,"url":"https://github.com/svelte-plugins/datepicker","last_synced_at":"2025-09-08T11:08:24.524Z","repository":{"id":208631152,"uuid":"722098663","full_name":"svelte-plugins/datepicker","owner":"svelte-plugins","description":"A simple datepicker component designed for Svelte.","archived":false,"fork":false,"pushed_at":"2025-02-13T02:18:38.000Z","size":1174,"stargazers_count":97,"open_issues_count":13,"forks_count":18,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-08T22:43:47.394Z","etag":null,"topics":["component","datepicker","dates","datetime","javascript","range-picker","rangepicker","svelte","timepicker"],"latest_commit_sha":null,"homepage":"https://svelte-plugins.github.io/datepicker","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svelte-plugins.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-22T12:38:02.000Z","updated_at":"2025-08-08T16:42:06.000Z","dependencies_parsed_at":"2023-11-22T14:28:19.481Z","dependency_job_id":"73c37715-f777-47e4-a1cd-ac242b598e6c","html_url":"https://github.com/svelte-plugins/datepicker","commit_stats":null,"previous_names":["svelte-plugins/datepicker"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/svelte-plugins/datepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svelte-plugins%2Fdatepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svelte-plugins%2Fdatepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svelte-plugins%2Fdatepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svelte-plugins%2Fdatepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svelte-plugins","download_url":"https://codeload.github.com/svelte-plugins/datepicker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svelte-plugins%2Fdatepicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274174271,"owners_count":25235203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-08T02:00:09.813Z","response_time":121,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","datepicker","dates","datetime","javascript","range-picker","rangepicker","svelte","timepicker"],"created_at":"2024-11-29T13:16:03.849Z","updated_at":"2025-09-08T11:08:24.496Z","avatar_url":"https://github.com/svelte-plugins.png","language":"JavaScript","readme":"# @svelte-plugins/datepicker\n\nA simple datepicker component designed for Svelte.\n\nTry it in the [Svelte REPL](https://svelte.dev/repl/cae0ce6e92634878b6e1a587146decbd?version=4.2.7).\n\n## Install\n\n```bash\n# npm\n\u003e npm install svelte @svelte-plugins/datepicker\n\n# pnpm\n\u003e pnpm install svelte @svelte-plugins/datepicker\n\n# yarn\n\u003e yarn add svelte @svelte-plugins/datepicker\n```\n\n## Using the DatePicker component\n```svelte\n\u003cscript\u003e\n  import { DatePicker } from \"@svelte-plugins/datepicker\";\n  import { format } from 'date-fns';\n\n  let startDate = new Date();\n  let dateFormat = 'MM/dd/yy';\n  let isOpen = false;\n\n  const toggleDatePicker = () =\u003e (isOpen = !isOpen);\n\n  const formatDate = (dateString) =\u003e {\n    if (isNaN(new Date(dateString))) {\n      return '';\n    }\n\n    return dateString \u0026\u0026 format(new Date(dateString), dateFormat) || '';\n  };\n\n\n  let formattedStartDate = formatDate(startDate);\n\n  const onChange = () =\u003e {\n    startDate = new Date(formattedStartDate);\n  };\n\n  $: formattedStartDate = formatDate(startDate);\n\u003c/script\u003e\n\n\u003cDatePicker bind:isOpen bind:startDate\u003e\n  \u003cinput type=\"text\" placeholder=\"Select date\" bind:value={formattedStartDate} on:click={toggleDatePicker} /\u003e\n\u003c/DatePicker\u003e\n\n\u003cstyle\u003e\n  input[type=\"text\"] {\n    border: 1px solid #eee;\n    border-radius: 4px;\n    padding: 8px;\n  }\n\u003c/style\u003e\n```\n\n## API\n\n### Props\n| Prop              | Description                                                                           | Default                     |\n| :---------------- | :------------------------------------------------------------------------------------ | :-------------------------- |\n| startDate\t        | The start date string or date object.\t                                                | `object` (default: `null`)\n| endDate\t          | The end date string or date object.\t                                                  | `object` (default: `null`)\n| startDateTime\t    | The start date time string in 24 hour format.\t                                        | `string` (default: `00:00`)\n| endDateTime\t      | The end date time string in 24 hour format.                                           | `string` (default: `00:00`)\n| defaultYear\t      |\tThe year you want to show as the default.\t                                            | `number` (default: `2023`)\n| align\t            | The edge alignment of the datepicker.                                                 | `string` (default: `left`)\n| enabledDates      | An array of date strings to enable only.                                              | `array` (default: [...])\n| disabledDates     | An array of date strings to disable.                                                  | `array` (default: [...])\n| isRange\t          |\tChanges the date picker into a range picker and allows start and end date selection.  | `boolean` (default: `false`)\n| isMultipane\t      |\tIf true, two calendar months will be shown side-by-side instead of one.               | `boolean` (default: `false`)\n| isOpen            |\tIf true, the picker will be shown without user interaction.\t                          | `boolean` (default: `false`)\n| showPresets\t      |\tIf true, the picker will show the preset ranges for selection.\t                      | `boolean` (default: `false`)\n| showPresetsOnly\t  |\tIf true, the picker will show only preset ranges.\t                                    | `boolean` (default: `false`)\n| showYearControls  |\tIf true, the picker will hide the year navigation controls.\t                          | `boolean` (default: `false`)\n| showTimePicker\t  |\tIf true, the picker will show the time picker.\t                                      | `boolean` (default: `false`)\n| enableFutureDates\t|\tIf true, the picker will allow the user to select future dates.                       | `boolean` (default: `false`)\n| enablePastDates\t  |\tIf disabled, the picker will prevent the user from selecting anything prior to today.\t| `boolean` (default: `true`)\n| theme             | The theme name that should be assigned to the theme data-attribute.                   | `string` (default: `''`)\n| presetRanges      | The array of present configs to replace the default set with.                         | `array` (default: [...])\n| includeFont       | If false, the default Rubik font will not be loaded                                   | `boolean` (default: `true`)\n\n### Events\n| Prop               | Description                                                                           | Default                     |\n| :----------------- | :------------------------------------------------------------------------------------ | :-------------------------- |\n| onDateChange\t     | Callback function to handle date change events.\t                                     | `function`\n| onDayClick\t       | Callback function to handle day click events.\t                                       | `function`\n| onNavigationChange | Callback function to handle the navigation click event for months and years           | `function`\n\n## Theming\nYou can customize DatePicker theme using several methods:\n- Assign a theme class name via the `theme` property that includes all of your CSS variables overrides\n- Define the overrides directly using the `style` property\n- Override the CSS variables globally\n\nDatePicker CSS variables:\n\n```css\n  /**\n   * Common Variables\n   */\n  --datepicker-border-color: #e8e9ea;\n\n  --datepicker-border-radius-small: .125rem;\n  --datepicker-border-radius-base: .25rem;\n  --datepicker-border-radius-large: .5rem;\n  --datepicker-border-radius-xlarge: .75rem;\n  --datepicker-border-radius-xxlarge: 1rem;\n  --datepicker-border-radius-xxxlarge: 1.125rem;\n\n  --datepicker-state-active: #0087ff;\n  --datepicker-state-hover: #e7f7fc;\n\n  --datepicker-color: #21333d;\n\n  --datepicker-font-family: 'Rubik', sans-serif;\n\n  --datepicker-font-size-jumbo: 1.75rem;\n  --datepicker-font-size-xxxlarge: 1.5rem;\n  --datepicker-font-size-xxlarge: 1.375rem;\n  --datepicker-font-size-xlarge: 1.25rem;\n  --datepicker-font-size-large: 1.125rem;\n  --datepicker-font-size-base: 14px;\n  --datepicker-font-size-medium: 0.89rem;\n  --datepicker-font-size-small: 0.75rem;\n  --datepicker-font-size-xsmall: 0.625rem;\n  --datepicker-font-size-xxsmall: 0.5rem;\n  --datepicker-font-size-xxxsmall: 0.375rem;\n  --datepicker-font-weight-thin: 100;\n  --datepicker-font-weight-light: 300;\n  --datepicker-font-weight-base: 400;\n  --datepicker-font-weight-medium: 500;\n  --datepicker-font-weight-bold: 700;\n  --datepicker-font-weight-black: 900;\n\n  --datepicker-spacing: 8px;\n\n  --datepicker-margin-xsmall: calc(var(--datepicker-spacing) / 4);\n  --datepicker-margin-small: calc(var(--datepicker-spacing) / 2);\n  --datepicker-margin-base: var(--datepicker-spacing);\n  --datepicker-margin-large: calc(var(--datepicker-spacing) * 2);\n  --datepicker-margin-xlarge: calc(var(--datepicker-spacing) * 3);\n  --datepicker-margin-xxlarge: calc(var(--datepicker-spacing) * 4);\n  --datepicker-margin-xxxlarge: calc(var(--datepicker-spacing) * 5);\n  --datepicker-margin-jumbo: calc(var(--datepicker-spacing) * 6);\n\n  --datepicker-padding-xsmall: calc(var(--datepicker-spacing) / 4);\n  --datepicker-padding-small: calc(var(--datepicker-spacing) / 2);\n  --datepicker-padding-base: var(--datepicker-spacing);\n  --datepicker-padding-large: calc(var(--datepicker-spacing) * 2);\n  --datepicker-padding-xlarge: calc(var(--datepicker-spacing) * 3);\n  --datepicker-padding-xxlarge: calc(var(--datepicker-spacing) * 4);\n  --datepicker-padding-xxxlarge: calc(var(--datepicker-spacing) * 5);\n  --datepicker-padding-jumbo: calc(var(--datepicker-spacing) * 6);\n\n  /**\n   * Container\n   */\n  --datepicker-container-background: #fff;\n  --datepicker-container-border: 1px solid var(--datepicker-border-color);\n  --datepicker-container-border-radius: 12px;\n  --datepicker-container-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);\n  --datepicker-container-font-family: var(--datepicker-font-family);\n  --datepicker-container-left: 0;\n  --datepicker-container-position: absolute;\n  --datepicker-container-top: 105%;\n  --datepicker-container-width: fit-content;\n  --datepicker-container-zindex: 99;\n\n  /**\n   * Calendar\n   */\n  --datepicker-calendar-border: 0;\n  --datepicker-calendar-padding: var(--datepicker-padding-base) var(--datepicker-padding-large) var(--datepicker-padding-xlarge);\n  --datepicker-calendar-position: relative;\n  --datepicker-calendar-width: 310px;\n\n  --datepicker-calendar-split-border: 1px solid var(--datepicker-border-color);\n\n  /**\n   * Calendar Header\n   */\n  --datepicker-calendar-header-align-items: center;\n  --datepicker-calendar-header-color: var(--datepicker-color);\n  --datepicker-calendar-header-display: flex;\n  --datepicker-calendar-header-font-size: var(--datepicker-font-size-large);\n  --datepicker-calendar-header-justify-content: space-between;\n  --datepicker-calendar-header-margin: 0 0 var(--datepicker-margin-xlarge) 0;\n  --datepicker-calendar-header-padding: var(--datepicker-padding-large) var(--datepicker-padding-base);\n  --datepicker-calendar-header-user-select: none;\n\n  /**\n   * Calendar Header Month Navigation\n   */\n  --datepicker-calendar-header-month-nav-background: transparent;\n  --datepicker-calendar-header-month-nav-background-hover: #f5f5f5;\n  --datepicker-calendar-header-month-nav-border: 0;\n  --datepicker-calendar-header-month-nav-cursor: pointer;\n  --datepicker-calendar-header-month-nav-border-radius: 20px;\n  --datepicker-calendar-header-month-nav-color: var(--datepicker-color);\n  --datepicker-calendar-header-month-nav-cursor: pointer;\n  --datepicker-calendar-header-month-nav-font-size: var(--datepicker-font-size-large);\n  --datepicker-calendar-header-month-nav-height: 32px;\n  --datepicker-calendar-header-month-nav-margin-left: -8px;\n  --datepicker-calendar-header-month-nav-padding: var(--datepicker-padding-small);\n  --datepicker-calendar-header-month-nav-text-align: center;\n  --datepicker-calendar-header-month-nav-width: 32px;\n\n  --datepicker-calendar-header-month-nav-icon-next-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACLSURBVHgB7ZTLCYAwEERHbcASUpIlaAd2YDoxlmIX3ixFEwwYQQL5kCWwD94ph5mwywIMUzmLlYRBe1lXENBrT+oSgktwiepLNJ63EWkl3AOltBMCkHh/kEv5F9SCGN8IzKntEYfAdwQb0kYaHO4uoUJBBIdzOAoiKMMNQ47wDvEceA7Zrp3BMLVyA56LVFYQOkngAAAAAElFTkSuQmCC') no-repeat center center;\n  --datepicker-calendar-header-month-nav-icon-next-background-size: 16px 16px;\n  --datepicker-calendar-header-month-nav-icon-next-filter: invert(0);\n  --datepicker-calendar-header-month-nav-icon-next-height: 16px;\n  --datepicker-calendar-header-month-nav-icon-next-margin: auto;\n  --datepicker-calendar-header-month-nav-icon-next-width: 16px;\n\n  --datepicker-calendar-header-month-nav-icon-prev-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgB7ZbBDYAgDEW/xgEcgZHcQDYRJ5ER3EhHcAPtAQMHQwIiSNKXvAMH+CUNDQDDVM5kLMJCnsYBmXHDN1IgIxzO4QIZ+Ty8gT9cOuuZ3BHHQa4hGxTszVOpnoJaFMbXAk2OzvpNC+7zojYVewFcBBdRVRE9CqCR4EvWIR4JO5iC5jzD/IoLU/FXPXheCj0AAAAASUVORK5CYII=') no-repeat center center;\n  --datepicker-calendar-header-month-nav-icon-prev-background-size: 16px 16px;\n  --datepicker-calendar-header-month-nav-icon-prev-filter: invert(0);\n  --datepicker-calendar-header-month-nav-icon-prev-height: 16px;\n  --datepicker-calendar-header-month-nav-icon-prev-margin: auto;\n  --datepicker-calendar-header-month-nav-icon-prev-width: 16px;\n\n  /**\n   * Calendar Header Text\n   */\n  --datepicker-calendar-header-text-align-items: center;\n  --datepicker-calendar-header-text-color: var(--datepicker-color);\n  --datepicker-calendar-header-text-display: flex;\n  --datepicker-calendar-header-text-font-size: inherit;\n  --datepicker-calendar-header-text-font-weight: var(--datepicker-font-weight-medium);\n  --datepicker-calendar-header-text-gap: 8px;\n\n  /**\n   * Calendar Header Year Navigation Container\n   */\n  --datepicker-calendar-header-year-align-items: center;\n  --datepicker-calendar-header-year-display: flex;\n  --datepicker-calendar-header-year-flex-direction: column;\n  --datepicker-calendar-header-year-margin: 0;\n\n  /**\n   * Calendar Header Year Navigation Controls\n   */\n  --datepicker-calendar-header-year-nav-display: block;\n  --datepicker-calendar-header-year-nav-color: var(--datepicker-color);\n  --datepicker-calendar-header-year-nav-height: 12px;\n  --datepicker-calendar-header-year-nav-line-height: 12px;\n  --datepicker-calendar-header-year-nav-margin: -2px 0 0 0;\n  --datepicker-calendar-header-year-nav-padding: 0;\n  --datepicker-calendar-header-year-nav-width: 12px;\n  --datepicker-calendar-header-year-nav-icon-font-size: 13px;\n\n  --datepicker-calendar-header-year-nav-icon-next-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABuSURBVHgB7c7BCYAwDIXhBy7gKB2hm9Vx3UJzqCASRWOTHvo+yDG8HyAiGt2Ef7LcLLeigyK31SsIdh4Pj9DGwyKu40u9kAht/OAe8TTuHvFm3C3iy3jziGQYv4vIMMjGcS0iwSjBWN/on4hoADu88UW4KXFVfgAAAABJRU5ErkJggg==') no-repeat center center;\n  --datepicker-calendar-header-year-nav-icon-next-background-size: 12px 12px;\n  --datepicker-calendar-header-year-nav-icon-next-display: block;\n  --datepicker-calendar-header-year-nav-icon-next-filter: invert(0);\n  --datepicker-calendar-header-year-nav-icon-next-height: 12px;\n  --datepicker-calendar-header-year-nav-icon-next-width: 12px;\n\n  --datepicker-calendar-header-year-nav-icon-prev-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB3SURBVHgB7dTRCYAwDATQAxdwlI6QzZpx3UIrKJSC1aS2fngP7kvi3VcBIqK/m26+S8qcssBHWu5Dynokwi5m9wIHyX5gHRGL2wAndYwoyxWN1DDi9XLLiG7lT0Z0L6+NGFZ+NWJoeW2EYjD9svy0PzACIiJqsAHF2EaCcjFGaQAAAABJRU5ErkJggg==') no-repeat center center;\n  --datepicker-calendar-header-year-nav-icon-prev-background-size: 12px 12px;\n  --datepicker-calendar-header-year-nav-icon-prev-display: block;\n  --datepicker-calendar-header-year-nav-icon-prev-filter: invert(0);\n  --datepicker-calendar-header-year-nav-icon-prev-height: 12px;\n  --datepicker-calendar-header-year-nav-icon-prev-width: 12px;\n\n  /**\n   * Presets\n   */\n  --datepicker-presets-border: 1px solid var(--datepicker-border-color);\n  --datepicker-presets-padding: 24px;\n  --datepicker-presets-minwidth: 180px;\n  --datepicker-presets-maxwidth: 200px;\n\n  /**\n   * Presets Button\n   */\n  --datepicker-presets-button-background: transparent;\n  --datepicker-presets-button-background-hover: var(--datepicker-state-hover);\n  --datepicker-presets-button-background-active: var(--datepicker-state-active);\n\n  --datepicker-presets-button-border: 0;\n  --datepicker-presets-button-border-radius: 40px;\n  --datepicker-presets-button-border-radius-active: 20px;\n\n  --datepicker-presets-button-color: var(--datepicker-color);\n  --datepicker-presets-button-color-active: #fff;\n  --datepicker-presets-button-color-hover: var(--datepicker-color);\n  --datepicker-presets-button-color-focus: var(--datepicker-color);\n\n  --datepicker-presets-button-cursor: pointer;\n  --datepicker-presets-button-cursor-active: default;\n\n  --datepicker-presets-button-font-family: var(--datepicker-font-family);\n  --datepicker-presets-button-font-size: var(--datepicker-font-size-base);\n  --datepicker-presets-button-font-weight-active: var(--datepicker-font-weight-medium);\n  --datepicker-presets-button-outline-focus: 5px auto -webkit-focus-ring-color;\n\n  --datepicker-presets-button-margin: var(--datepicker-margin-small) 0;\n  --datepicker-presets-button-padding: calc(var(--datepicker-padding-base) + 2px) var(--datepicker-padding-large);\n  --datepicker-presets-button-text-align: left;\n  --datepicker-presets-button-zindex-focus: 10;\n\n  /**\n   * Timepicker Container\n   */\n  --datepicker-timepicker-container-align-items: center;\n  --datepicker-timepicker-container-display: flex;\n  --datepicker-timepicker-container-justify-content: space-around;\n  --datepicker-timepicker-container-margin-bottom: var(--datepicker-margin-xlarge);\n\n  /**\n   * Timepicker Input\n   */\n  --datepicker-timepicker-input-border: 1px solid var(--datepicker-border-color);\n  --datepicker-timepicker-input-border-radius: var(--datepicker-border-radius-base);\n  --datepicker-timepicker-input-display: block;\n  --datepicker-timepicker-input-font-family: var(--datepicker-font-family);\n  --datepicker-timepicker-input-margin: 0 auto;\n  --datepicker-timepicker-input-padding: var(--datepicker-padding-small) var(--datepicker-padding-base);\n\n  /**\n   * Calendar DOW (Days of Week)\n   */\n  --datepicker-calendar-dow-color: #8b9198;\n  --datepicker-calendar-dow-font-size: var(--datepicker-font-size-base);\n  --datepicker-calendar-dow-font-weight: var(--datepicker-font-weight-medium);\n  --datepicker-calendar-dow-margin-bottom: var(--datepicker-margin-large);\n  --datepicker-calendar-dow-text-align: center;\n\n  /**\n   * Calendar Month\n   */\n  --datepicker-calendar-container-display: grid;\n  --datepicker-calendar-container-grid-template-columns: repeat(7, 1fr);\n  --datepicker-calendar-container-grid-gap: 0;\n  --datepicker-calendar-container-width: fit-content;\n\n  /**\n   * Calendar Day Container\n   */\n  --datepicker-calendar-day-container-appearance: none;\n  --datepicker-calendar-day-container-background: inherit;\n  --datepicker-calendar-day-container-border: 0;\n  --datepicker-calendar-day-container-margin: 0;\n  --datepicker-calendar-day-container-padding: 0;\n  --datepicker-calendar-day-container-position: relative;\n  --datepicker-calendar-day-container-text-align: center;\n\n  /**\n   * Calendar Day\n   */\n  --datepicker-calendar-day-align-items: center;\n  --datepicker-calendar-day-background-hover: #f5f5f5;\n  --datepicker-calendar-day-border: 1px solid transparent;\n  --datepicker-calendar-day-border: 1px solid transparent;\n  --datepicker-calendar-day-border-radius: 100%;\n  --datepicker-calendar-day-color: #232a32;\n  --datepicker-calendar-day-color-disabled: #b9bdc1;\n  --datepicker-calendar-day-color-hover: #232a32;\n  --datepicker-calendar-day-cursor: pointer;\n  --datepicker-calendar-day-cursor-disabled: default;\n  --datepicker-calendar-day-display: flex;\n  --datepicker-calendar-day-height: 40px;\n  --datepicker-calendar-day-justify-content: center;\n  --datepicker-calendar-day-font-family: var(--datepicker-font-family);\n  --datepicker-calendar-day-font-size: var(--datepicker-font-size-base);\n  --datepicker-calendar-day-margin-bottom: 1px;\n  --datepicker-calendar-day-padding: var(--datepicker-padding-base);\n  --datepicker-calendar-day-text-align: center;\n  --datepicker-calendar-day-width: 40px;\n  --datepicker-calendar-day-zindex-focus: 12;\n\n  /**\n   * Calendar Days Outside of Month\n   */\n  --datepicker-calendar-day-other-border: 0;\n  --datepicker-calendar-day-other-box-shadow: none;\n  --datepicker-calendar-day-other-color: #d1d3d6;\n\n  /**\n   * Calendar Today\n   */\n  --datepicker-calendar-today-background: transparent;\n  --datepicker-calendar-today-border: 1px solid #232a32;\n  --datepicker-calendar-today-cursor: default;\n  --datepicker-calendar-today-font-weight: var(--datepicker-font-weight-bold);\n\n  /**\n   * Calendar Range\n   */\n  --datepicker-calendar-range-background: var(--datepicker-state-hover);\n  --datepicker-calendar-range-background-disabled: var(--datepicker-state-hover);\n  --datepicker-calendar-range-border: 0;\n  --datepicker-calendar-range-border-radius: 0;\n  --datepicker-calendar-range-color: var(--datepicker-color);\n  --datepicker-calendar-range-color-disabled: #ffc0b7;\n  --datepicker-calendar-range-cursor: default;\n  --datepicker-calendar-range-font-weight: var(--datepicker-font-weight-base);\n\n  /**\n   * Calendar Range Start \u0026 End\n   */\n  --datepicker-calendar-range-start-box-shadow: inset -20px 0 0 var(--datepicker-state-hover);\n  --datepicker-calendar-range-end-box-shadow: inset 20px 0 0 var(--datepicker-state-hover);\n  --datepicker-calendar-range-start-box-shadow-selected: inset -20px 0 0 #eceff1;\n  --datepicker-calendar-range-end-box-shadow-selected: inset 20px 0 0 #eceff1;\n\n  --datepicker-calendar-range-start-end-background: #f5f5f5;\n  --datepicker-calendar-range-start-end-color: #232a32;\n\n  /**\n   * Calendar Range Selected\n   */\n  --datepicker-calendar-range-selected-background: var(--datepicker-state-active);\n  --datepicker-calendar-range-selected-border-radius: 20px;\n  --datepicker-calendar-range-selected-color: #fff;\n  --datepicker-calendar-range-selected-font-weight: var(--datepicker-font-weight-medium);\n\n  --datepicker-calendar-range-selected-start-border-radius: 20px;\n\n  /**\n   * Calendar Range Hover\n   */\n  --datepicker-calendar-range-included-background: #eceff1;\n  --datepicker-calendar-range-included-box-shadow: inset 20px 0 0 #eceff1;\n  --datepicker-calendar-range-included-color: #232a32;\n  --datepicker-calendar-range-included-font-weight: var(--datepicker-font-weight-base);\n  --datepicker-calendar-range-included-height: var(--datepicker-calendar-day-height);\n```\n\n### Using the theme property\n\n```svelte\n\u003cDatePicker ... theme=\"custom-datepicker\"\u003e...\u003c/DatePicker\u003e\n\n\u003cstyle\u003e\n  :global(.datepicker[data-picker-theme=\"custom-datepicker\"]) {\n    --datepicker-container-background: #ff66ae;\n    --datepicker-container-border: 1px solid #ff1683;\n\n    --datepicker-calendar-header-text-color: #fff;\n    --datepicker-calendar-dow-color: #fff;\n    --datepicker-calendar-day-color: #fff;\n    --datepicker-calendar-day-color-disabled: pink;\n    --datepicker-calendar-range-selected-background: #ff1683;\n\n    --datepicker-calendar-header-month-nav-background-hover: #ff1683;\n    --datepicker-calendar-header-month-nav-icon-next-filter: invert(100);\n    --datepicker-calendar-header-month-nav-icon-prev-filter: invert(100);\n    --datepicker-calendar-header-year-nav-icon-next-filter: invert(100);\n    --datepicker-calendar-header-year-nav-icon-prev-filter: invert(100);\n\n    --datepicker-calendar-split-border: 1px solid pink;\n\n    --datepicker-presets-border: 1px solid pink;\n    --datepicker-presets-button-background-active: #ff1683;\n    --datepicker-presets-button-color: #fff;\n    --datepicker-presets-button-color-active: #fff;\n    --datepicker-presets-button-color-hover: #333;\n    --datepicker-presets-button-color-focus: #333;\n  }\n\u003c/style\u003e\n```\n\n## Changelog\n\n[Changelog](CHANGELOG.md)\n\n## License\n\n[MIT](LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvelte-plugins%2Fdatepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvelte-plugins%2Fdatepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvelte-plugins%2Fdatepicker/lists"}