{"id":15138341,"url":"https://github.com/vanillawc/wc-datepicker","last_synced_at":"2025-10-23T14:31:10.979Z","repository":{"id":48633994,"uuid":"275125227","full_name":"vanillawc/wc-datepicker","owner":"vanillawc","description":"A web component that wraps a text input element and adds date-picker functionality to it.","archived":false,"fork":false,"pushed_at":"2021-07-16T17:43:08.000Z","size":39,"stargazers_count":25,"open_issues_count":2,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-01-30T18:52:06.202Z","etag":null,"topics":["calendar","custom-elements","date-picker","datepicker","html","javascript","vanilla-web-component","web-components"],"latest_commit_sha":null,"homepage":"http://135.181.40.67/wc-datepicker/","language":null,"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/vanillawc.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}},"created_at":"2020-06-26T10:01:36.000Z","updated_at":"2024-12-23T23:00:29.000Z","dependencies_parsed_at":"2022-09-05T14:02:06.237Z","dependency_job_id":null,"html_url":"https://github.com/vanillawc/wc-datepicker","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanillawc%2Fwc-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vanillawc","download_url":"https://codeload.github.com/vanillawc/wc-datepicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237843697,"owners_count":19375187,"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":["calendar","custom-elements","date-picker","datepicker","html","javascript","vanilla-web-component","web-components"],"created_at":"2024-09-26T07:22:11.006Z","updated_at":"2025-10-23T14:31:10.635Z","avatar_url":"https://github.com/vanillawc.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/vanillawc/wc-datepicker/releases\"\u003e\u003cimg src=\"https://badgen.net/github/tag/vanillawc/wc-datepicker\" alt=\"GitHub Releases\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vanillawc/wc-datepicker\"\u003e\u003cimg src=\"https://badgen.net/npm/v/@vanillawc/wc-datepicker\" alt=\"NPM Releases\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=@vanillawc/wc-datepicker\"\u003e\u003cimg src=\"https://badgen.net/bundlephobia/minzip/@vanillawc/wc-datepicker\" alt=\"Bundlephobia\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/vanillawc/wc-datepicker/actions\"\u003e\u003cimg src=\"https://github.com/vanillawc/wc-datepicker/workflows/Latest/badge.svg\" alt=\"Latest Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/vanillawc/wc-datepicker/actions\"\u003e\u003cimg src=\"https://github.com/vanillawc/wc-datepicker/workflows/Release/badge.svg\" alt=\"Release Status\"\u003e\u003c/a\u003e\n\n  \u003ca href=\"https://discord.gg/aSWYgtybzV\"\u003e\u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/723296249121603604?color=%23738ADB\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n# wc-datepicker\n\nA web component that wraps a text input element and adds date-picker functionality to it.\n\nLive demo available [here.](http://135.181.40.67/wc-datepicker/)\n\n## Features\n\nWc-datepicker is a stand-alone vanilla JS web component that does not use shadow DOM. The component wraps a text input element and adds date-picker functionality to it. The calendar will appear when the input element gets focus.\n\nComponent features include:\n\n- highly customizable calendar layout\n- configurable names of months and week days\n- first day of week selection: sunday or monday\n- date format customization\n- initial date setting\n- written date input \u0026 validation\n- keyboard accessible calendar (tabindex)\n- rapid month/year switching with long press\n- Angular compatibility (see below)\n\n## Including the component to an HTML file\n\n1. Import polyfill, this is not needed for modern browsers:\n\n    ```html\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.4.1/custom-elements.min.js\"\u003e\u003c/script\u003e\n    ```\n\n2. Import custom element:\n\n    ```html\n    \u003cscript defer src='wc-datepicker.min.js'\u003e\u003c/script\u003e\n    ```\n\n3. Start using it!\n\n    ```html\n    \u003cwc-datepicker\u003e\n      \u003cinput type='text'\u003e\n    \u003c/wc-datepicker\u003e\n    ```\n## Including the component from NPM\n\n1. Install and import polyfill, this is not needed for modern browsers:\n\n   See https://www.npmjs.com/package/@webcomponents/custom-elements\n\n2. Install wc-datepicker NPM package:\n\n    ```console\n    npm i @vanillawc/wc-datepicker\n    ```\n\n3. Import custom element:\n\n    ```javascript\n    import '@vanillawc/wc-datepicker'\n    ```\n\n4. Start using it:\n\n   ```javascript\n   var picker = document.createElement('wc-datepicker')\n   var input = document.createElement('input')\n   input.setAttribute('type', 'text')\n   picker.appendChild(input)\n   document.body.appendChild(picker)\n   ```\n## Attributes\n\nCurrently component has only one custom attribute that can be assigned a value in the HTML tag:\n\nName            | Type      | Description             | Unit / Values      | Default value\n--------------  | --------- | ------------------------| -------------------| --------------\ninit-date       | String    | Initial date in the input field | Date in \"dd.mm.yyyy\" format or\u003cbr\u003e\"current\" to select current date                     | None\n\n\nFollowing component attributes are boolean attributes, also known as valueless attributes. The presence of a boolean attribute in the HTML tag represents the true value, and the absence of the attribute represents the false value:\n\nName   | Description | if attribute is defined | If attribute is not defined\n-------|-------------|-------------------------|----------------------------\nignore-on-focus | Calendar appearance after the input element gets focus| Calendar won't appear| Calendar appears\nsunday-first | First day of the calendar week | Sunday is first | Monday is first\npersist-on-select | Calendar visibility after the date has been selected | Calendar won't disappear | Calendar disappears\nshow-close-icon | Calendar close icon visibility | Icon is visible | Icon is hidden\n\nUsage examples:\n\n   ```html\n    \u003cwc-datepicker init-date='28.12.2005' sunday-first\u003e\n      \u003cinput type='text'\u003e\n    \u003c/wc-datepicker\u003e\n   ```\n\n   ```html\n    \u003cwc-datepicker init-date='current' persist-on-select\u003e\n      \u003cinput type='text'\u003e\n    \u003c/wc-datepicker\u003e\n   ```\n\n\nFollowing custom attributes can be specified at build time or dynamically at runtime:\n\nName            | Type      | Description             | Unit / Values                                | Default value\n---             | ---       | ---                     | ---                                          | ---\ndayNames       | Array of strings   | Week day names       |Week day names from Monday to Sunday                     | Mon, Tue, Wed, Thu, Fri, Sat, Sun\nmonthNames       | Array of strings   | Month names       |Month names from January to December                     | Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec\nignoreOnFocus       | Boolean   | Calendar appearance after the input element gets focus       |true for not appearing\u003cbr\u003efalse for appearing                     | false\nsundayFirst       | Boolean   | Starting day of the week       |true for Sunday\u003cbr\u003efalse for Monday                     | false\npersistOnSelect       | Boolean   | Calendar visibility after the date has been selected       |true for visible\u003cbr\u003efalse for hidden                     | false\nshowCloseIcon       | Boolean   | Calendar close icon visibility       |true for visible\u003cbr\u003efalse for hidden                     | false\ninitDate       | String   | Initial date in the input field       |Date in \"dd.mm.yyyy\" format or \"current\" to select current date                     | None\nlongPressThreshold       | Number   | Month/year switch long press threshold        |Milliseconds                     | 500\nlongPressInterval       | Number   | Long press month/year switch interval        |Milliseconds                     | 150\n\nUsage example:\n\n   ```javascript\n   var picker = document.createElement('wc-datepicker')\n   picker.dayNames = ['Mo','Tu','We','Th','Fr','Sa','Su']\n   picker.initDate = 'current'\n   var input = document.createElement(\"input\")\n   input.setAttribute('type', 'text')\n   picker.appendChild(input)\n   document.body.appendChild(picker)\n   ```\n**Regarding dynamic and runtime usage of the component, custom attributes should always be set before the datepicker element is appended to DOM or initialized.**\n\nAlthough *init()* method can be called multiple times, not all attributes can be changed after the initial init.\n\nRegarding *init-date* (*initDate*) attribute, notice that the initial date format is determined by *_returnDateString()* and *_parseAndValidateInputStr()* methods, see chapter **Date format and validation** below.\n\n## Methods\n\n### init()\nInitializes date-picker functionality. This method is called automatically when the datepicker element is appended to DOM.\n\nThis method has no effect, if the element does not have an input element as a child.\n\nIf the datepicker is appended to DOM before the input element is appended to datepicker, *init()* must be called to make datepicker work.\n### setFocusOnCal()\nThe calendar will appear and get the focus when this method is called.\n\nOn touch UIs this method can be used to prevent the keyboard from appearing, as the text input field won't get the focus.\n\nThis method has no effect, if *init()* has not been called. If *ignoreOnFocus* has been set to true, this method is the only way to make the calendar appear.\n### getDateString()\nReturns the date as string. Default format is \"mm.dd.yyyy\".\n\nReturns null if the input field does not contain a valid date.\n\nDate format and validity is determined by *_returnDateString()* and *_parseAndValidateInputStr()* methods.\n### getDateObject()\nReturns the date as standard JS date object.\n\nReturns null if the input field does not contain a valid date.\n\n**Notice:**\n\nSince datepicker returns the object date in local time, UTC getter methods should not be used when processing the returned date further. Neither *Date.toJSON()* nor *Date.toISOString()* methods should be used, as they return the date in UTC format too.\n## Date format and validation\nDefault format is \"mm.dd.yyyy\".\n\nDate format can be changed by modifying *_returnDateString()* method.\n\nWhen date is written to input field, it is validated automatically if datepicker is initialized.\n\nIf the date format to be used is changed, then the validating method must be modified also.\n\nThe validating method to be modified is *_parseAndValidateInputStr()*\n\nIt must return an object with either 1 or 4 properties:\n* valid - a boolean value indicating whether the date string is valid or not\n* day - a number value indicating the day of month (1 - 31) of the valid date string\n* month - a number value indicating the month (0-11) of the valid date string\n* year - a number value indicating the year of the valid date string\n\nMethods *getDateString()* and *getDateObject()* can also be used for validating the date, see above.\n## Events\nIf the input element loses focus and the date string is not valid, text input element shall dispatch [invalid](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event.\n\nWhen the date string is edited to be a valid date or a new date is selected from the calendar, text input element shall dispatch *dateselect* event, which is a non-standard custom event.\n\n*Notice that event dispatching has changed since version 0.0.3. Starting from version 0.0.4, it is the wrapped input element instead of the custom element that shall dispatch events. Custom event name has been changed from datechange to dateselect.*\n\n## Style and layout\nThe style is defined in the HTML template string inside the component's contructor.\nStyling can be moved to an external CSS file by cutting and pasting everything that's inside style tags and then removing the void tags.\n\nCalendar width and height can be adjusted by modifying font-sizes and paddings:\n```css\n.calDayName, .calDayStyle, .calAdjacentMonthDay, #calTitle {\n  padding:5px;\n  font-size:20px;\n  text-align:center;\n}\n.calCtrl {\n  font-size:20px;\n  padding:0px 8px;\n  user-select:none;\n}\n```\n\nCalendar's adjacent month day numbers can be changed to invisible by replacing the color definition in *.calAdjacentMonthDay* with\n```css\nvisibility:hidden;\n```\n\n## Angular usage\n\nUsing FLUX dataflow and one-way binding:\n\n```html\n    \u003cwc-datepicker\u003e\n      \u003cinput\n        [ngModel]=\"whatever.date\"\n        (dateselect)=\"getDate($event)\"\n        (invalid)=\"notifyError()\"\n        type=\"text\"\n      /\u003e\n    \u003c/wc-datepicker\u003e\n```\n\nIgnoring component's invalid event and validating date externally:\n\n```html\n    \u003cwc-datepicker\u003e\n      \u003cinput\n        [ngModel]=\"whatever.date\"\n        (dateselect)=\"getDate($event)\"\n        (change)=\"validateDate($event)\"\n        type=\"text\"\n      /\u003e\n    \u003c/wc-datepicker\u003e\n```\n\nUsing distinct icon/button to activate the calendar:\n\n```html\n    \u003cwc-datepicker #mypicker ignore-on-focus\u003e\n      \u003cinput\n        [ngModel]=\"whatever.date\"\n        (dateselect)=\"getDate($event)\"\n        type=\"text\"\n      /\u003e\n    \u003c/wc-datepicker\u003e\n    \u003cdiv\u003e\n      \u003cimg\n        src=\"calendar.jpg\"\n        (click)=\"mypicker.setFocusOnCal()\"\n      \u003e\n    \u003c/div\u003e\n```\n## Building\nUnminified scripts in the dist folder can be used and modified as such, there are no build scripts available for them.\n\nBuilding is done by executing the minifier script minify.cmd, which is a Linux bash shell script.\n\nMinify.cmd can be found from dist folder.\n\nBuilding (minifying) requires [terser](https://github.com/terser/terser) command line tool to be installed. It can be installed with following command:\n```console\n npm install terser -g\n   ```\n## Contributing\nQuestions, suggestions and bug reports are welcome. Safari testing would be nice.\n\n## License\nCopyright (c) 2019-2020 Jussi Utunen\n\nLicensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanillawc%2Fwc-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvanillawc%2Fwc-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanillawc%2Fwc-datepicker/lists"}