{"id":26630286,"url":"https://github.com/elite174/solid-simple-datepicker","last_synced_at":"2025-07-14T04:10:58.739Z","repository":{"id":153226981,"uuid":"628269501","full_name":"elite174/solid-simple-datepicker","owner":"elite174","description":"A nice, customizable and simple datepicker component for every day!","archived":false,"fork":false,"pushed_at":"2023-09-28T10:33:57.000Z","size":232,"stargazers_count":14,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-01T17:49:18.015Z","etag":null,"topics":["component","datepicker","datepicker-component","solidjs"],"latest_commit_sha":null,"homepage":"https://solid-simple-datepicker.vercel.app","language":"TypeScript","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/elite174.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-15T12:30:02.000Z","updated_at":"2025-03-31T18:18:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"26d374b1-393d-4c30-a8f8-0f2879fc32d3","html_url":"https://github.com/elite174/solid-simple-datepicker","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fsolid-simple-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fsolid-simple-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fsolid-simple-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elite174%2Fsolid-simple-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elite174","download_url":"https://codeload.github.com/elite174/solid-simple-datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248243421,"owners_count":21071054,"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","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","datepicker-component","solidjs"],"created_at":"2025-03-24T13:17:58.756Z","updated_at":"2025-04-10T15:23:01.851Z","avatar_url":"https://github.com/elite174.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# solid-simple-datepicker\n\n[![version](https://img.shields.io/npm/v/solid-simple-datepicker?style=for-the-badge)](https://www.npmjs.com/package/solid-simple-datepicker)\n![npm](https://img.shields.io/npm/dw/solid-simple-datepicker?style=for-the-badge)\n\nA nice, customizable and simple datepicker component for every day!\n\n- 💥 0 dependencies\n- ⚒️ fully customizable with CSS\n- 📚 supports custom translations\n\n![image](https://github.com/elite174/solid-simple-datepicker/assets/13636224/e0235b5d-fdd4-49da-825f-90877f9d63b8)\n\n## Installation\n\n`npm i solid-simple-datepicker`\n\n`yarn add solid-simple-datepicker`\n\n`pnpm add solid-simple-datepicker`\n\n## Usage\n\n```tsx\nimport { SimpleDatepicker } from \"solid-simple-datepicker\";\nimport \"solid-simple-datepicker/styles.css\";\n\n...\nconst [date, setDate] = createSignal\u003cDate\u003e();\n\nreturn \u003cSimpleDatepicker selectedDate={date()} onChange={setDate} /\u003e;\n```\n\n## Props\n\n```ts\nexport interface DatePickerProps {\n  selectedDate?: Date;\n  /**\n   * Start year to show in year list\n   * @default 1960\n   */\n  startYear?: number;\n  /**\n   * End year to show in year list\n   * @default 2060\n   */\n  endYear?: number;\n  /**\n   * Days to disable\n   * @type Number from 1 to 31\n   */\n  disabledDays?: number[];\n\n  /**\n   * Months to disable\n   * @type Number from 0 to 11\n   */\n  disabledMonths?: number[];\n  /**\n   * Years to disable\n   */\n  disabledYears?: number[];\n  /**\n   * I18N object\n   */\n  locale?: Locale;\n  /**\n   * The order in which datepicker sections should be displayed\n   * @type \"d-m-y\" | \"d-y-m\" | \"m-d-y\" | \"m-y-d\" | \"y-m-d\" | \"y-d-m\"\n   * @default \"m-d-y\"\n   */\n  order?: SectionOrder;\n  /**\n   * Extra class applied to the container element\n   */\n  class?: string;\n  /**\n   * Extra styles applied to the container element\n   */\n  style?: JSX.StyleHTMLAttributes\u003cHTMLElement\u003e;\n  /**\n   * Tag for the container element\n   * @default \"div\"\n   */\n  tag?: string;\n  /**\n   * Is footer visible\n   * @default true\n   */\n  footer?: boolean;\n  /**\n   * The number from 0 (Sun) to 6 (Sat)\n   * @default 0 (Sunday)\n   */\n  startWeekDay?: number;\n  /**\n   * The callback is called when the date is valid\n   * It won't be called when the date is unfilled (e.g. month is not selected)\n   * or the date is invalid (e.g. Feb 31 2000)\n   */\n  onChange?: (date: Date) =\u003e void;\n  /**\n   * The callback is called when \"Done\" button of default footer component is clicked\n   */\n  onFooterDone?: VoidFunction;\n  /**\n   * Custom footer component to show\n   */\n  FooterComponent?: ParentComponent;\n}\n```\n\n## Customization\n\nYou can easily customize the view of the Datepicker with CSS custom variables! Just pass extra class to the component with redefined CSS variables.\n\nYou can set the following variables (check styles.css):\n\n```css\n--sd-scrollbar-size: 6px;\n--sd-scrollbar-border-radius: 8px;\n\n--sd-button-border-radius: 4px;\n--sd-button-height: 2rem;\n--sd-button-width: 4rem;\n--sd-button-inline-padding: 0.5rem;\n--sd-button-focus-outline: 1px solid var(--sd-primary-color);\n\n--sd-scrollbar-color: #888;\n\n--sd-background-color: white;\n--sd-text-color: #172454;\n\n--sd-primary-color: #1e4cd7;\n--sd-primary-hover-color: #1f3eae;\n--sd-primary-focus-color: #94c4fc;\n\n--sd-text-primary-color: white;\n--sd-text-disabled-color: #aaa;\n--sd-button-disabled-color: #e3e3e3;\n--sd-list-caption-color: #999;\n\n--sd-footer-border-color: #eee;\n\n--sd-transition-time: 50ms;\n--sd-transition-timing-function: ease-in-out;\n\n--sd-section-gap: 1rem;\n--sd-list-caption-gap: 0.25rem;\n--sd-list-caption-font-size: 0.8rem;\n--sd-padding: 0.5rem;\n\n--sd-box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.035), 0px 5px 14px rgba(0, 0, 0, 0.07);\n--sd-border-radius: 8px;\n\n--sd-footer-border-top: 1px solid var(--sd-footer-border-color);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felite174%2Fsolid-simple-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felite174%2Fsolid-simple-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felite174%2Fsolid-simple-datepicker/lists"}