{"id":23086978,"url":"https://github.com/chaseottofy/monthpicker-lite-js","last_synced_at":"2025-08-04T10:32:55.635Z","repository":{"id":190977379,"uuid":"683700114","full_name":"chaseottofy/monthpicker-lite-js","owner":"chaseottofy","description":"Lightweight month interface datepicker for Vanilla JS \u0026 Typescript","archived":false,"fork":false,"pushed_at":"2023-09-01T04:05:33.000Z","size":433,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-05T00:40:31.267Z","etag":null,"topics":["datepicker","datepicker-lite","datepickers","javascript-datepicker","javascript-library","javascript-monthpicker","monthpicker","monthpicker-lite","monthpickers","typescript","typescript-datepicker","typescript-library","typescript-monthpicker"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/monthpicker-lite-js","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/chaseottofy.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-08-27T12:31:48.000Z","updated_at":"2025-02-21T17:20:12.000Z","dependencies_parsed_at":"2024-10-25T01:50:16.115Z","dependency_job_id":"799a82e8-a08f-455a-9220-d2f102ab2250","html_url":"https://github.com/chaseottofy/monthpicker-lite-js","commit_stats":{"total_commits":54,"total_committers":1,"mean_commits":54.0,"dds":0.0,"last_synced_commit":"5bf4454e74dc1b7ea7162b76bb46e355b475cc7e"},"previous_names":["chaseottofy/monthpicker-vjs","chaseottofy/monthpicker-lite-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chaseottofy/monthpicker-lite-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaseottofy%2Fmonthpicker-lite-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaseottofy%2Fmonthpicker-lite-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaseottofy%2Fmonthpicker-lite-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaseottofy%2Fmonthpicker-lite-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chaseottofy","download_url":"https://codeload.github.com/chaseottofy/monthpicker-lite-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaseottofy%2Fmonthpicker-lite-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268682650,"owners_count":24289675,"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-08-04T02:00:09.867Z","response_time":79,"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":["datepicker","datepicker-lite","datepickers","javascript-datepicker","javascript-library","javascript-monthpicker","monthpicker","monthpicker-lite","monthpickers","typescript","typescript-datepicker","typescript-library","typescript-monthpicker"],"created_at":"2024-12-16T19:40:03.767Z","updated_at":"2025-08-04T10:32:55.603Z","avatar_url":"https://github.com/chaseottofy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# monthpicker-lite-js\n\n[![npm version](https://badge.fury.io/js/monthpicker-lite-js.svg)](https://badge.fury.io/js/monthpicker-lite-js)\n\nZero-dependency, lightweight datepicker for Vanilla JS \u0026 Typescript.\n\n## \u003ca href=\"https://stackblitz.com/edit/monthpicker-lite-js\" target=\"_blank\"\u003eTypescript Stackblitz Demo V. 1.1.9 \u003e\u003c/a\u003e\n\n\u003cimg src=\"screenshots/aaaa.png\"\u003e\n\n## Sections\n- [Installation](#installation)\n- [Clone \u0026 Build](#clone/build)\n- [Import](#import)\n- [Features](#features)\n- [Configuration](#configuration)\n- [Methods](#methods)\n- [Example](#example)\n- [Accessibility](#accessibility)\n- [License](#license)\n\n## Installation\n\n**Install via [NPM](https://www.npmjs.com/package/monthpicker-lite-js)**\n\n```bash\nnpm i monthpicker-lite-js\n```\n\n## Clone/Build\n\nVery minimal build process that uses Typescript and tsup.\n~ Generates a minified build in the dist folder.\n\n```bash\ngit clone https://github.com/chaseottofy/monthpicker-lite-js.git\nnpm install\ncd monthpicker-lite-js-main\nnpm run build\n\n# test\nnpm run test\n```\n\n## Import\n\n**Interfaces available for Typescript users.**\n\n- The following example uses Vite.\n- Some build tools require different css import schema.\n\n```ts\nimport 'monthpicker-lite-js/dist/monthpicker-lite-js.css';\n\n// vanilla js...\nimport { MonthPicker } from 'monthpicker-lite-js';\n\n// typescript...\nimport { MonthPicker, MonthPickerInterface } ... \n```\n\n#### Styles can also loaded via CDN\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/monthpicker-lite-js@1.1.3/dist/monthpicker-lite-js.css\" /\u003e\n```\n\n---\n\n## Features\n\n#### CSS \u0026 JS gzip: ~ 5-6kb\n\n#### Zero Dependencies\n- No external date handling libraries.\n- No external styling libraries.\n- Vanilla JS W/ Typescript support.\n- CSS Modules to avoid class name collisions.\n\n#### Relies solely on native Date object and DOM API\n- Avoids common innerHTML pitfalls that can lead to XSS vulnerabilities.\n- No need to worry about sanitizing user input.\n- Does not rely on input type=\"date\" for functionality.\n\n#### Accessible - [Accessibility Section](#accessibility)\n- Passes several audits 100% including lighthouse, NU HTML, and WCAG 2.1 contrast ratio requirements.\n- Proper ARIA roles and attributes are applied to all relevant elements.\n- Logical tab order and keyboard support. (all clickable elements are tabbable)\n\n#### Customizable\n- Vanilla CSS allows for easy customization without the need for any SAAS/LESS/SCSS compilers.\n- Easily change theme from light to dark or edit existing CSS variables.\n- Customizable date format and ability to show/hide days from previous and next months.\n- Customizable callbacks that fire after a date is selected.\n\n#### Responsive\n- The monthpicker will position itself in the most optimal location relative to the input element so that it is always visible.\n- Accounts for scrolling, window resizing, and input focus events.\n- Adjusts itself on window resize.\n\n#### Compatible\n- Supports Typescript and ES6+.\n- Compatible with all modern browsers and IE11.\n- Avoids date parsing that breaks on some mobile browsers.\n- Extends HTML5 input type=text rather than input type=date to avoid browser inconsistencies - notably CSS styling and mobile date parsing.\n\n#### Test Coverage\n- Date Helpers: 100% coverage\n- MonthPicker Class Public Methods: 100% coverage\n- Uses Jest/@testing-library\n\n---\n\n## Configuration\n\n**Important note relative to CSS Modules:**\n- The CSS classes are obfuscated through CSS Modules to avoid class name collisions.\n- `styles` is imported in the (src/constants.ts)[] file and is then used to reference the CSS classes throughout the codebase.\n\nThe monthpicker constructor consists of 8 total paramters, 7 of which are optional.\nThe simplest configuration is to pass only the rootContainer parameter.\n`const monthpicker = new MonthPicker(rootContainer)`\n\nEach of the below parameters, **except rootContainer** have a corresponding setter/getter method that can be called after instantiation.\n\n- [Root parameter](#params-root) -- REQUIRED --\n- [Date parameter](#params-date)\n- [Format parameter](#params-format)\n- [Theme parameter](#params-theme)\n- [Callbacks parameter](#params-callbacks)\n- [CloseOnSelect parameter](#params-closeOnSelect)\n- [OnlyShowCurrentMonth parameter](#params-onlyShowCurrentMonth)\n- [AlignPickerMiddle parameter](#params-alignPickerMiddle)\n\n\u003ca href=\"https://github.com/chaseottofy/monthpicker-lite-js/blob/main/src/monthpicker/monthpickerClass.ts\"\u003e\n  Link: MonthPicker Class Source Code\n\u003c/a\u003e\n\n```ts\n/**\n * MonthPicker\n * @constructor\n * @param rootContainer         HTMLElement  : Must be in DOM\n * @param date                  Date         : Start date (default: new Date())\n * @param format                input-format : mm/dd/yyyy ect.\n * @param THEME                 string       : light or dark\n * @param callbacks             Function[]   : \u003cArray\u003e[callbacks]\n * @param closeOnSelect         boolean      : Close picker on date \n * @param onlyShowCurrentMonth  boolean      : Only show current month\n * @param alignPickerMiddle     boolean      : Align Picker to middle of Input\n */\n\nconst monthpicker = new MonthPicker(\n  rootContainer: HTMLElement,       // REQUIRED \n  date?: Date,                      // OPTIONAL - default: new Date()\n  format?: string,                  // OPTIONAL - default: 'Month dd, yyyy'\n  THEME?: string,                   // OPTIONAL - default: 'dark'\n  callbacks?: Function[],           // OPTIONAL - default: []\n  closeOnSelect?: boolean,          // OPTIONAL - default: true\n  onlyShowCurrentMonth?: boolean    // OPTIONAL - default: false\n  alignPickerMiddle?: boolean       // OPTIONAL - default: false\n)\n```\n\n### params-rootContainer\n\n#### -- REQUIRED --\n\n**rootContainer: HTMLElement**\n- The element that the date input and monthpicker will be appended to.\n- Once a variable is declared using the MonthPicker class, the rootContainer passed here will immediately be populated with both the input \u0026 monthpicker instance. (monthpicker is hidden by default)\n- This is the only parameter that does not have a setter method. If you need to change the rootContainer, you will need to destroy the monthpicker and instantiate a new one with the new rootContainer.\n- This can be done by calling the destroy() method on the monthpicker instance and then simply declaring a new variable with the MonthPicker class.\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"month-picker-input-wrapper\"\u003e\u003cinput /\u003e\u003c/div\u003e\n  \u003cdiv class=\"month-picker\"\u003e...\u003c/div\u003e\n\u003c/div\u003e\n```\n\n- Note that the monthpicker is positioned absolutely and will ignore the layout of the rootContainer. \n- The position of the monthpicker is calculated based on the position of the input element. Several heuristics are used to ensure that the monthpicker is always visible - even if it has to overlap the input element or be positioned outside of the rootContainer. \n**For a more in depth explanation of the positioning logic, see [Link to Positioning Logic](https://github.com/chaseottofy/monthpicker-lite-js/blob/main/src/helpers/domHelpers.ts#L115-L221)**\n\n- One more important note: \n  - Event Listeners are attached to the window object to allow for flexibility in terms of toggling and focus related actions. \n    - There are four listeners in total, all of which are removed when the monthpicker is destroyed.\n    - Scrolling and Month navigation events are throttled @ 150ms\n    - Resize events are debounced @ 50ms and have passive arguments set to true to prevent jank.\n\n---\n\n### params-Date\n\n#### -- optional --\n\n**date?: Date**\n- Must be valid Date represented as a javascript Date object.\n- Represents the date that the monthpicker will instantiate with.\n- If no date is passed, the monthpicker will instantiate with the current date.\n\n**Methods: @param date**\n```ts\nmonthpicker.setDate(date: Date): void\nmonthpicker.getDate(): Date\nmonthpicker.getDateArray(): [\n  number (year), \n  number (month), \n  number (day)\n];\n\n// get date as string of input format\n// defaults to 'month dd, yyyy'\nmonthpicker.getDateFormatted(): string \n```\n\n---\n\n### params-format\n\n#### -- optional --\n\n**format?: string**\n- Defaults to 'month dd, yyyy'\n- Sets the format of the date input and can be accessed via the getDateFormatted() method.\n- Accepts the following formats:\n  - 'ddmmyyyy' (01092023)\n  - 'dd/mm/yyyy' (09/01/2023)\n  - 'mm/dd/yyyy' (01/09/2023)\n  - 'dd-mm-yyyy' (09-01-2023)\n  - 'mm-dd-yyyy' (01-09-2023)\n  - 'month dd, yyyy' (January 9th, 2023)\n  - 'month dd yyyy' (January 9 2023)\n  - 'mth dd yyyy' (Jan 9 2023)\n  - 'mth dd, yyyy' (Jan 9th, 2023)\n\n**Methods: @param format**\n```ts\nmonthpicker.setFormat(format: string): void\nmonthpicker.getFormat(): string\n```\n\n---\n\n### params-theme\n\n#### -- optional --\n\n**theme?: string**\n- Sets the theme of the input and monthpicker.\n- Defaults to 'dark' : accepts ('light' | 'dark')\n\n**Methods: @param theme**\n```ts\nmonthpicker.setTheme(theme: string): void\nmonthpicker.getTheme(): string\n```\n\n---\n\n### params-callbacks\n\n#### -- optional --\n\n**callbacks?: Function[]**\n- Defaults to an empty array.\n- Provides a way to pass custom functions to the monthpicker that instantiate after a date is selected.\n- Each callback passed in the array will have access the same parameter 'date: Date' which represents the date that was selected.\n- Callbacks are called in the order that they are passed.\n  \n**Methods: @param callbacks**\n\n```ts\nmonthpicker.setCallbacks(callbacks: Function[]): void\nmonthpicker.getCallbacks(): Function[]\n\n// Example\nconst callback = (date: Date) =\u003e console.log(date);\nmonthpicker.setCallbacks([callback]);\nmonthpicker.getCallbacks(); // [callback]\nmonthpicker.setCallbacks([])\nmonthpicker.getCallbacks(); // []\n```\n\n---\n\n### params-closeOnSelect\n\n#### -- optional --\n\n**closeOnSelect?: boolean**\n- Defaults to true.\n- Close the monthpicker after a date is selected.\n\n**Methods: @param closeOnSelect**\n```ts\nmonthpicker.setCloseOnSelect(closeOnSelect: boolean): void\nmonthpicker.getCloseOnSelect(): boolean\n```\n\n---\n\n### params-onlyShowCurrentMonth\n\n#### -- optional --\n\n**onlyShowCurrentMonth?: boolean**\n- Defaults to false.\n- Rather than showing days from previous and next months for the current month, only show the days within the current month.\n- (Does not affect the layout of the monthpicker, Previous/Next days of month will just be blank).\n\n**Methods: @param onlyShowCurrentMonth**\n```ts\nmonthpicker.setOnlyShowCurrentMonth(onlyShowCurrentMonth: boolean): void\nmonthpicker.getOnlyShowCurrentMonth(): boolean\n```\n\n---\n\n### params-alignPickerMiddle\n\n#### -- optional --\n\n**alignPickerMiddle?: boolean**\n- Defaults to false.\n- Align picker to middle of input element when possible\n\n**Methods: @param alignPickerMiddle**\n```ts\nmonthpicker.setAlignPickerMiddle(alignPickerMiddle: boolean): void\nmonthpicker.getAlignPickerMiddle(): boolean\n```\n\n---\n\n## Methods\n\n#### Full list of public methods\n```ts\nsetRootContainer(rootContainer: HTMLElement): void;\nsetDate(date: Date): void;\nsetFormat(format: string): void;\nsetCallbacks(callbacks: DatepickerCallback): void;\naddCallback(callback: Function): void;\nsetTheme(theme: string): void;\nsetCloseOnSelect(closeOnSelect: boolean): void;\nsetOnlyShowCurrentMonth(onlyShowCurrentMonth: boolean): void;\nsetAlignPickerMiddle(alignPickerMiddle: boolean): void;\n\ngetRootContainer(): HTMLElement | null;\ngetDate(): Date;\ngetDateArray(): number[];\ngetDateFormatted(): string;\ngetTheme(): string;\ngetCallbacks(): DatepickerCallback;\ngetFormat(): string;\ngetCloseOnSelect(): boolean;\ngetOnlyShowCurrentMonth(): boolean;\ngetAlignPickerMiddle(): boolean;\ngetInstances(): InstancesInterface;\ngetMonthPickerInstance(): HTMLElement | null;\ngetInputWrapperInstance(): HTMLElement | null;\ngetInputInstance(): HTMLInputElement | null;\n\ndestroy(): void;\ndisable(): void;\nenable(): void;\ntoggle(): void;\nclose(): void;\nopen(): void;\n\ninit(): void;\n```\n\n`monthPicker` will be used as the variable name for the rest of the examples.\n\n#### Setters\n- All setters will force the monthpicker closed if it is open.\n\n```ts\n/**\n * @method setRootContainer(HTMLElement) - set root container\n * @param HTMLElement - Must a valid HTMLElement in the DOM\n */\nsetRootContainer(rootContainer: HTMLElement): void;\n\n/**\n * @method setDate(Date) - Sets date of monthpicker\n * @param date - Date Object (new Date())\n * Invalid dates will be ignored \n * and will not update the monthpicker\n */\nsetDate(date: Date): void;\n\n/**\n * @method setFormat(string) - Schema for input display\n * @param string - Must be one of the following formats:\n * Long (January) : 'month dd, yyyy', 'month dd yyyy',\n * Abbr (Jan)     : 'mth dd yyyy', 'mth dd, yyyy'\n * No Format      : 'ddmmyyyy'\n * Numeric Slash  : 'dd/mm/yyyy', 'mm/dd/yyyy'\n * Numeric Dash   : 'dd-mm-yyyy', 'mm-dd-yyyy'\n */\nsetFormat(format: string): void;\n\n/**\n * @method setCallbacks(Function[]) - \u003cArray\u003e[callbacks]\n * @param callbacks - Array of functions\n * Each callback will have access to the \n * same parameter 'date: Date' (Date Object of selected date)\n * Each callback will be instantiated in the order that they are passed\n * upon date selection.\n * @example\n  const callback = (date: Date) =\u003e console.log(date);\n  const callback2 = () =\u003e console.log('callback2');\n  monthpicker.setCallbacks([callback, callback2]);\n  returns: \"date object, 'callback2'\"\n */\nsetCallbacks(callbacks: DatepickerCallback): void;\n\n/**\n * @method addCallback(Function) - Add single callback\n */\naddCallback(() =\u003e {\n  const dateFormatted = monthPicker.getDateFormatted();\n  return dateFormatted;\n});\n\n/**\n * @method setTheme(string) - 'light' | 'dark'\n * Defaults to 'dark'\n */\nsetTheme(theme: string): void;\n\n/**\n * @method setCloseOnSelect(boolean) - Close picker after date selection\n * Defaults to true.\n */\nsetCloseOnSelect(closeOnSelect: boolean): void;\n\n/**\n * @method setOnlyShowCurrentMonth(boolean)\n * Defaults to false.\n * The monthpicker retains a fixed layout of 6 rows of 7 days.\n * By default, the monthpicker will show days from the previous and next months\n * To leave previous and next days blank, setOnlyShowCurrentMonth(true)\n */\nsetOnlyShowCurrentMonth(onlyShowCurrentMonth: boolean): void;\n\n/**\n * @method setAlignPickerMiddle(boolean)\n * Align picker to middle of input element when possible\n * Defaults to false. (aligns to left of input)\n */\nsetAlignPickerMiddle(alignPickerMiddle: boolean): void;\n```\n\n#### Getters\n```ts\n// returns rootContainer\ngetRootContainer(): HTMLElement;\n\n/**\n * Three options for getting the current date of the monthpicker\n * @method getDate() - Returns Date Object\n * @method getDateArray() - Returns [year, month, day] \u003cArray of numbers\u003e\n * @method getDateFormatted() - Returns date as string in specified format\n */\ngetDate(): Date;\ngetDateArray(): number[];\ngetDateFormatted(): string;\n\n// returns array of set callbacks\ngetCallbacks(): DatepickerCallback; \n\n// returns current theme\ngetTheme(): string;\n\n// returns set input format (mm/dd/yyyy ect.)\ngetFormat(): string; \n\n/**\n * The following three methods return booleans\n * @method getCloseOnSelect()\n * @method getOnlyShowCurrentMonth()\n * @method getAlignPickerMiddle()\n */\ngetCloseOnSelect(): boolean;\ngetOnlyShowCurrentMonth(): boolean;\ngetAlignPickerMiddle(): boolean;\n\n/**\n * The following four methods return HTMLElements || null if not initialized\n * - They reference the DOM wrappers that are created for\n *   the picker and input elements.\n * @method getInstances() - Returns object of all instances\n * @method getMonthPickerInstance() - Returns monthpicker instance\n * @method getInputWrapperInstance() - Returns input wrapper instance\n * @method getInputInstance() - Returns input instance\n */\ngetInstances(): InstancesInterface;\ngetMonthPickerInstance(): HTMLElement | null;\ngetInputWrapperInstance(): HTMLElement | null;\ngetInputInstance(): HTMLInputElement | null;\n```\n\n#### Modifiers (destroy, open, ect.)\n```ts\n/**\n * @method destroy - Removes all monthpicker/input event listeners and clears DOM.\n * Any method called after destroy(), other than init(),\n * will be ignored and have no effect.\n */\ndestroy(): void;\n\n/**\n * @method init() - Re-instantiates monthpicker and appends to DOM.\n * Called automatically after declaration of monthpicker instance.\n * Only method that can be called after @method destroy()\n * \n * Will ignore subsequent calls if already instantiated.\n * \n * init() \u0026 destroy() can work in tandem to keep the DOM clean if needed.\n * This is useful if your app is heavy with DOM content, however,\n * it is not recommended to destroy and re-instantiate since the logic\n * is configured to update rather than destruct and re-create.\n * \n * Elements are only ever appended to the DOM once, if performance is a\n * concern, but you still want to have the ability to disable/enable, use\n * the disable() and enable() methods.\n */\ninit(): void;\n\n/**\n * @method disable() - Disables monthpicker/input without clearing DOM.\n * @method enable()  - Enables monthpicker/input. (Default)\n * @method toggle()  - Toggles open/close\n * @method close()   - Force close\n * @method open()    - Force open\n */\ndisable(): void;\nenable(): void;\ntoggle(): void;\nclose(): void;\nopen(): void;\n```\n\n---\n\n## Example\n\n**The monthpicker instance is created by declaring a variable with the MonthPicker class. There is no need to call any init method after declaration, however that option does exist if at any point `monthPicker.destroy()` is called.**\n\n```ts\n// Necessary CSS import (or just copy/paste the css into your own stylesheet)\n// Note that CSS classes are obfuscated through CSS Modules\nimport 'monthpicker-lite-js/dist/monthpicker-lite-js.css';\n\n// MonthPickerOptionsInterface \u0026\u0026 \n// MonthPickerInterface are optional Typescript Interfaces\nimport {MonthPicker, MonthPickerInterface, MonthPickerOptionsInterface} from 'monthpicker-lite-js';\n\nconst callback = (date: Date) =\u003e console.log(date);\n\nconst options: MonthPickerOptionsInterface = {\n  rootContainer: document.querySelector('.container') as HTMLElement,\n  startDate: new Date(),\n  pickerCallbacks: [\n    ((date: Date) =\u003e console.log(date)),\n    (() =\u003e console.log('callback2')),\n    callback,\n  ],\n  theme: 'dark',\n  format: 'month dd, yyyy',\n  closeOnSelect: true,\n  onlyShowCurrentMonth: false,\n  alignPickerMiddle: false,\n}\n\n// Declare with all options\nconst monthPicker = new MonthPicker(...Object.values(options)) as MonthPickerInterface;\n\n// Date Get/Set\nmonthPicker.setDate(new Date(2020, 1, 1));\nconst currentDate = monthPicker.getDate();              // Date Object\nconst [year, month, day] = monthPicker.getDateArray();  // [2020, 1, 1]\nconst dateFormatted = monthPicker.getDateFormatted();   // 'February 1st, 2020'\n\n// Format Get/Set\nmonthPicker.setFormat('mm/dd/yyyy');\nconst currentFormat = monthPicker.getFormat();          // 'mm/dd/yyyy'\n\n// Theme Get/Set\nmonthPicker.setTheme('light');\nconst currentTheme = monthPicker.getTheme();            // 'light'\n\n// Callback Get/Set\nmonthPicker.setCallbacks([(() =\u003e console.log(\n  'all other callbacks will be removed and replaced with this one'\n))]);\nconst currentCallbacks = monthPicker.getCallbacks();    // [Function]\n\n// Add a single callback then get the formatted date from getDateFormatted();\nmonthPicker.addCallback(() =\u003e {\n  const dateFormatted = monthPicker.getDateFormatted();\n  return dateFormatted;\n});\n\n// CloseOnSelect Get/Set\nmonthPicker.setCloseOnSelect(false);\nconst currentCloseOnSelect = monthPicker.getCloseOnSelect();\n\n// OnlyShowCurrentMonth Get/Set\nmonthPicker.setOnlyShowCurrentMonth(true);\nconst currentOnlyShowCurrentMonth = monthPicker.getOnlyShowCurrentMonth();\n\n// AlignPickerMiddle Get/Set\nmonthPicker.setAlignPickerMiddle(true);\nconst currentAlignPickerMiddle = monthPicker.getAlignPickerMiddle();\n\nmonthPicker.destroy(); // Remove all event listeners and clear DOM\nmonthPicker.setTheme('light'); // ignored as monthpicker is not in DOM\n\nmonthPicker.init(); // Re-instantiate monthpicker\n\n// Change rootContainer of monthpicker\nmonthPicker.setRootContainer(document.querySelector('.new-container'));\n\nmonthPicker.disable(); // Disable monthpicker\nmonthPicker.setTheme('light'); // ignored as monthpicker is disabled\n\n// Enable monthpicker\n// Still will be dark theme as setTheme() above was ignored\nmonthPicker.enable(); \n\nmonthPicker.open();// Force Open\nmonthPicker.close();// Force Close\nmonthPicker.toggle();// Toggle Open/Close\nmonthPicker.init() // ignored as already instantiated\n```\n\n--- \n\n## Accessibility\n\n**Keyboard Support**\n- Tab: Moves focus to the next focusable element. All clickable elements on the monthpicker are capable of being tabbed to.\n- Escape: Closes the monthpicker.\n- *Hidden elements are not focusable.*\n\n**ARIA Support**\n- Proper ARIA roles and attributes are applied to all relevant elements.\n- Tested with Lighthouse and NU HTML Checker to be 100% compliant.\n\n**Contrast**\n- Both themes pass WCAG 2.1 AAA contrast ratio requirements.\n- Tested with Lighthouse to be 100% compliant.\n\n---\n\n#### Browser Support\n\nCompatible with all modern browsers and IE11.\nAll date handling is done with the native Date object and should be compatible for the foreseeable future.\n\n---\n\n#### Passes the following audits:\n- lighthouse performance/a11y/seo/best practices (100%)\n- NU HTML Checker (100%)\n- PageSpeed Insights audit (100%)\n- WCAG 2.1 AA/AAA contrast ratio requirements (100%)\n\n---\n\n## Contact\n\n```bash\nottofy@zohomail.com\n```\n\n## License MIT\n\nCopyright (c) 2023 Chase Ottofy\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaseottofy%2Fmonthpicker-lite-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchaseottofy%2Fmonthpicker-lite-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaseottofy%2Fmonthpicker-lite-js/lists"}