{"id":26844301,"url":"https://github.com/lemon3/birthdaypicker","last_synced_at":"2025-04-30T19:34:20.838Z","repository":{"id":64342288,"uuid":"573026002","full_name":"lemon3/birthdaypicker","owner":"lemon3","description":"a simple dependency-free javascript birthday picker (date selector). An easy way to pick a day!","archived":false,"fork":false,"pushed_at":"2025-03-19T09:51:21.000Z","size":1639,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-19T10:38:11.017Z","etag":null,"topics":["alpinejs","birthday-picker","birthdaypicker","date-picker","javascript","pickaday","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"","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/lemon3.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":"2022-12-01T14:40:48.000Z","updated_at":"2025-03-19T09:51:25.000Z","dependencies_parsed_at":"2024-03-09T21:21:03.754Z","dependency_job_id":"ec087819-1beb-488b-a432-1511d6f54d07","html_url":"https://github.com/lemon3/birthdaypicker","commit_stats":{"total_commits":47,"total_committers":1,"mean_commits":47.0,"dds":0.0,"last_synced_commit":"04751c5350af12b164f8f8bc7757c54d88f50de5"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemon3%2Fbirthdaypicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemon3%2Fbirthdaypicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemon3%2Fbirthdaypicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemon3%2Fbirthdaypicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lemon3","download_url":"https://codeload.github.com/lemon3/birthdaypicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246365623,"owners_count":20765549,"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":["alpinejs","birthday-picker","birthdaypicker","date-picker","javascript","pickaday","tailwind","tailwindcss"],"created_at":"2025-03-30T19:19:26.456Z","updated_at":"2025-03-30T19:19:29.321Z","avatar_url":"https://github.com/lemon3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003c!-- PROJECT SHIELDS --\u003e\n[![MIT License][license-shield]][license-url]\n![min coverage][mincoverage-shield]\n\n[![LinkedIn][linkedin-shield]][linkedin-url]\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/lemon3/birthdaypicker\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/lemon3/birthdaypicker/main/_assets/images/logo.svg\" alt=\"Logo\" width=\"360\" height=\"auto\"\u003e\n  \u003c/a\u003e\n  \u003ch3 align=\"center\"\u003eA highly customizable JavaScript birthday picker\u003c/h3\u003e\n  \u003cp\u003e... with support for multiple languages (i18n), date formats, offering a wide range of setting options to suit your application's needs.\"\u003c/p\u003e\n  \u003ca href=\"https://lemon3.github.io/birthdaypicker/\"\u003eBirthdayPicker Demo\u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#api\"\u003eApi\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\n    \u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n## tl;dr\n\n**modern (module):**\n```Bash\npnpm add birthdaypicker\n```\n\n```html\n\u003cdiv id=\"my-div\"\u003e\u003c/div\u003e\n```\n\n```js\nimport BirthdayPicker from 'birthdaypicker';\nconst options {}; // options (see below)\nconst bp = new BirthdayPicker('#my-div', options);\n```\n\n**classic:**\ncomplete example:\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003edemo\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"my-div\"\u003e\u003c/div\u003e\n    \u003cscript src=\"https://unpkg.com/birthdaypicker\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      const mbp = new BirthdayPicker('#my-div');\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\nI needed a birthday input field that is easy to use and without JS dependencies. \"Simple\" in this context means: with as few clicks as possible to the result!\n\n### Features\n* Coded in vanilla JS.\n* Internationalization (i18n)\n  * change the language on the fly\n* BirthdayPicker is dependency-free ;)\n\n**[BirthdayPicker Demo \u003e\u003e](https://lemon3.github.io/birthdaypicker/)**\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- USAGE EXAMPLES --\u003e\n## Usage\n### First Steps\n#### module js approach\nuse pnpm / npm / yarn to install the package\n```Bash\npnpm add birthdaypicker\n```\nor:\n```Bash\nnpm install birthdaypicker\n```\nor:\n```Bash\nyarn add birthdaypicker\n```\nand then us it with\n```html\n\u003cdiv id=\"my-div\"\u003e\u003c/div\u003e\n```\n```js\nimport BirthdayPicker from 'birthdaypicker';\nconst options = {}\nconst bp = new BirthdayPicker('#my-div', options);\n```\n#### classic js approach\nif you use the classic js approach by loading scripts in html code, just download and integrate the **birthdaypicker.umd.js** script in your code:\n```html\n\u003cdiv id=\"my-div\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://unpkg.com/birthdaypicker\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const options = {}\n  const bp = new BirthdayPicker('#my-div', options);\n\u003c/script\u003e\n```\n\n### Examples via data API\n#### html:\n```html\n\u003c!-- with default values --\u003e\n\u003cdiv data-birthdaypicker\u003e\u003c/div\u003e\n\n\u003c!-- with current date --\u003e\n\u003cdiv data-birthdaypicker=\"{ 'defaultDate': 'now' }\"\u003e\u003c/div\u003e\n\n\u003c!-- with arrangement set to: day | month | year --\u003e\n\u003cdiv data-birthdaypicker=\"{ 'arrange': 'dmy' }\"\u003e\u003c/div\u003e\n\n\u003c!-- using multiple values --\u003e\n\u003cdiv data-birthdaypicker=\"{\n  'locale': 'fr',\n  'defaultDate': 'now',\n  'arrange':'dmy'\n}\"\u003e\u003c/div\u003e\n\n\u003c!-- using the settings string --\u003e\n\u003cdiv data-birthdaypicker=\"locale:fr,defaultDate:now\"\u003e\u003c/div\u003e\n```\n\n**Don't forget to call the init function if using the data API**.\n```html\n\u003cscript\u003e\n  // initializes all elements\n  // with following attribute: data-birthdaypicker\n  BirthdayPicker.init();\n\u003c/script\u003e\n```\n\n### Example via data API (select boxes in DOM)\nSelect-boxes boxes must be inside the main container (where the **data-birthdaypicker** attribute is defined)!\nIf the data attributes are set to the select-boxes, the plugin knows which box should be used for what.\nCorrect syntax for the data attributes (select element):\n- year: data-birthdaypicker-year\n- month: data-birthdaypicker-month\n- day: data-birthdaypicker-day\n\nThis scenario (select-boxes in DOM) works best with [tailwindcss](https://tailwindcss.com/), as the select-boxes can be styled with classes here.\n\n| :memo: INFO                                                                                                                                                 |\n| :---------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| If select-boxes already exist in the DOM you cannot use the **arrange** option, eg.: { arrange: 'dmy' }, as this plugin doesn't rearrange existing Elements |\n\n#### 1) with special data attribute on the select boxes\nhtml\n```html\n\u003cdiv data-birthdaypicker\u003e\n  \u003cselect data-birthdaypicker-year\u003e\u003c/select\u003e\n  \u003cselect data-birthdaypicker-month\u003e\u003c/select\u003e\n  \u003cselect data-birthdaypicker-day\u003e\u003c/select\u003e\n\u003c/div\u003e\n```\n... or use with specified selectors (these selectors take precedence over the data attribute values like **data-birthdaypicker-year**)\n#### 2) with id's\nhtml\n```html\n\u003c!-- yearEl, monthEl and dayEl must be a regular querySelector! --\u003e\n\u003cdiv data-birthdaypicker=\"{\n  'yearEl':'#myYear',\n  'monthEl':'#myMonth',\n  'dayEl':'.myDay'\n}\"\u003e\n  \u003cselect id=\"myYear\"\u003e\u003c/select\u003e\n  \u003cselect id=\"myMonth\"\u003e\u003c/select\u003e\n  \u003cselect class=\"myDay\"\u003e\u003c/select\u003e\n\u003c/div\u003e\n```\n\n#### 2) with just 'blank' select boxes\nhtml\n```html\n\u003cdiv data-birthdaypicker=\"{'arrange':'dmy'}\"\u003e\n  \u003cselect\u003e\u003c/select\u003e \u003c!-- day --\u003e\n  \u003cselect\u003e\u003c/select\u003e \u003c!-- month --\u003e\n  \u003cselect\u003e\u003c/select\u003e \u003c!-- year --\u003e\n\u003c/div\u003e\n```\n\n**Don't forget to call the init function if using the data API**.\n```html\n\u003cscript\u003e\n  // initializes all found BirthdayPicker\n  // looking for [data-birthdaypicker]\n  BirthdayPicker.init();\n\u003c/script\u003e\n```\n\n\n### Example via js\n\n#### js Example #1\njust a div, js does the \"magic\"!\n```html\n\u003c!-- initialized with default values --\u003e\n\u003cdiv id=\"bp1\"\u003e\u003c/div\u003e\n\u003c!-- initialized with custom options (see below) --\u003e\n\u003cdiv id=\"bp2\"\u003e\u003c/div\u003e\n\n\u003cscript src=\"https://unpkg.com/birthdaypicker\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // initialize with default values\n  const bp1 = new BirthdayPicker('#bp1');\n\n  // initialize with current date (new Date(), or 'now')\n  // see 'option API' section for all available options\n  const bp2 = new BirthdayPicker('#bp2', {\n    defaultDate: new Date()\n  });\n\u003c/script\u003e\n```\n\n#### js Example #2\nhtml file with defined select boxes.\nReference these in the options object.\n```html\n\u003cdiv id=\"bp1\"\u003e\n  \u003cselect id=\"myYear\"\u003e\u003c/select\u003e\n  \u003cselect id=\"myMonth\"\u003e\u003c/select\u003e\n  \u003cselect id=\"myDay\"\u003e\u003c/select\u003e\n\u003c/div\u003e\n\n\u003cscript src=\"https://unpkg.com/birthdaypicker\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const bp1 = new BirthdayPicker('#bp1', {\n    yearEl: '#myYear',\n    monthEl: '#myMonth',\n    dayEl: '#myDay',\n    // ... other options\n  });\n\u003c/script\u003e\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## API\n### initialize\n```js\n// element: a dom reference to one element, or a querySelector string\nconst element = '#my-div';\n// an options-object, see below\nconst options = {};\nconst myBirthdayPicker = new BirthdayPicker(element, options);\n```\n\n### API / options\n```js\noptions = {\n  // sets the minimal age for a person, animal,...\n  // if set \u003e 0 it changes the maximal selectable year by it's value\n  // e.g.: maxYear: 2022, minAge: 10 -\u003e max selectable year: 2012!\n  // default: 0\n  // example: 10\n  minAge: 0,\n\n  // sets the maximal age for a person, animal,...\n  // min selectable year is 1922 if maxYear is 2022 (2022 - 100)\n  // default: 100,\n  maxAge: 100,\n\n  // sets the minimal year (overrides maxAge)\n  // default: null\n  // example: 1980\n  minYear: null,\n\n  // sets the maximal year\n  // default: '(new Date()).getFullYear()'\n  // example: 2040 | 'now'\n  maxYear: 'now',\n\n  // coming soon\n  lowerLimit: null,\n\n  // coming soon\n  upperLimit: null,\n\n  // sets the month format for the select box\n  // available: 'short', 'long', 'numeric'\n  // default: 'short'\n  monthFormat: 'short',\n\n  // shows a placeholder for each select box\n  // available: true | false\n  // default: true\n  placeholder: true,\n\n  // if set, name will be added to each select box\n  // and [name]-year [name]-month [name]-day (will be added too)\n  // where name is the className chosen.\n  // e.g.: 'my-class' results in:\n  // \u003cselect class=\"my-class my-class-year\"\u003e\u003c/select\u003e\n  className: null,\n\n  // sets the selected start date\n  // available: 'now' | new Date() | '2020-10-12' (YYYY-MM-DD)\n  // default: null\n  // example: '2012-12-04'\n  defaultDate: null,\n\n  // if the init method should be called on creating an instance:\n  // const myBp = new BirthdayPicker(el, {})\n  // if set to false, you have to call myBp.init() afterwards.\n  // available: true | false\n  // default: true\n  autoInit: true,\n\n  // if the month and day values in the select-box should have a leading\n  // zero or not. If set to true, you will get: 01, 02, 03, ... 10, 11, ...\n  // if set to false, you will get: 1, 2, 3, ... 10, 11, ...\n  // available: true | false\n  // default: true\n  leadingZero: true,\n\n  // sets the language to be used\n  // available: 'en', 'de', 'fr', ... all country codes with 2chars (ISO 3166-1 alpha-2)\n  // default: 'en'\n  locale: 'en',\n\n  // if it should be possible to select a 'future' date\n  // false means: unable to select a date in the future\n  // available: true | false\n  // default: false\n  selectFuture: false,\n\n  // to arrange the select-boxes\n  // y: year, m: month, d: day\n  // so ymd means:  year | month | day\n  // ordering is only available, if select boxes are not present in the DOM\n  // available: 'ymd', 'ydm', 'myd', 'mdy', 'dmy', 'dym'\n  // default: 'ymd'\n  arrange: 'ymd',\n\n  // specify a custom select-box for the year\n  // must be inside the main element\n  // all valid query-strings allowed\n  // available: null, valid query-strings (querySelector), or html reference\n  // default: null\n  // example: '#my-year-select'\n  yearEl: null,\n\n  // specify a custom select-box for the month\n  // must be inside the main element\n  // all valid query-strings allowed\n  // available: null, valid query-strings (querySelector), or html reference\n  // default: null\n  // example: '#my-month-select'\n  monthEl: null,\n\n  // specify a custom select-box for the day\n  // must be inside the main element\n  // all valid query-strings allowed\n  // available: null, valid query-strings (querySelector), or html reference\n  // default: null\n  // example: '#my-day-select'\n  dayEl: null,\n\n  // sets days to highest possible value, if the month (or in special cases\n  // the year) is changed and the current selected day-value is higher than\n  // the possible value for the new month (year).\n  // true: rounds down\n  // false: returns undefined for the day (so nothing is selected)\n  // available: true | false\n  // default: true\n  //\n  // Example:\n  // Current date is 2024-02-29 (yyyy-mm-dd)\n  // set year back to 2023\n  // if roundDownDay is true: day will be: 28\n  // if roundDownDay is false: day will be: undefined\n  roundDownDay: true\n};\n```\n### API / methods\n```js\nconst element = '#my-div';\nconst options = {\n  autoInit: false\n};\nconst myBirthdayPicker = new BirthdayPicker(element, options);\n\n// init: initializes the picker\nmyBirthdayPicker.init();\n\n// getDate returns the current selected date with the language default date-formatting!\n// you can change the format, by calling the method with a specific date-format value.\n// e.g.: 'yyyy-m-d'\n// if date is 2. Sep. 1994\n// return values are:\n// 'yy'   -\u003e 94\n// 'yyyy' -\u003e 1994\n// 'mm'   -\u003e 09\n// 'm'    -\u003e 9\n// 'dd'   -\u003e 02\n// 'd'    -\u003e 2\nmyBirthdayPicker.getDateString('yyyy-m-d');\n\n// returns a Date object (like new Date())\n// for the current year, month, day values\nmyBirthdayPicker.getDate();\n\n// returns the age of the subject (person)\nmyBirthdayPicker.getAge();\n\n// just a small helper method, returns true or false\nmyBirthdayPicker.isLeapYear(2020); // true\n\n// listen to different events eg.\n// available events: init | datechange\nconst myEventListener = () =\u003e {};\nmyBirthdayPicker.addEventListener('datechange', myEventListener, false);\n\n// remove the event listener\nmyBirthdayPicker.removeEventListener('datechange', myEventListener);\n\n// set the date to a given value\n// e.g.: '2020-10-22' // yyyy-mm-dd: this is the 22. oct. 2020\n// or to the current date with new Date()\nmyBirthdayPicker.setDate(new Date());\n\n// resets the date\n// true: resets to the defaultDate (start date);\n// false: all select boxes will be reset to default value (if available)\nmyBirthdayPicker.resetDate(true);\n\n// sets the language for the current instance\n// e.g.: 'en', 'de', 'fr', ...\nmyBirthdayPicker.setLanguage('en');\n\n// sets the month format for the current instance\n// available: 'short', 'long', 'numeric'\nmyBirthdayPicker.setMonthFormat('short');\n\n// setter, if the\nmyBirthdayPicker.useLeadingZero(true); // true | false\n\n// kills the current instance and removes all event-listeners\nmyBirthdayPicker.kill();\n```\n\n### API / event-listeners\n```js\nconst element = document.querySelector('#my-element');\nconst options = {};\nconst myPicker = new BirthdayPicker(element, options);\n\n// available event listeners\nconst available = [\n  'init',        // triggered after init\n  'kill',        // triggered when the kill was called\n  'daychange',   // triggered when the day value was changed\n  'monthchange', // triggered when the month value was changed\n  'yearchange',  // triggered when the year value was changed\n  'datechange',  // triggered when day, month or year value was changed\n]\n\n// use the instance as event listener\nmyPicker.addEventListener('datechange', (evt) =\u003e {\n  // todo something ...\n});\n\n// or the element itself\nelement.addEventListener('datechange', (evt) =\u003e {\n  // todo something ...\n});\n```\n\n### API / event-listeners (as callback)\ninside the option object\n```js\nconst options = {\n  // ...\n  datechange: (evt) =\u003e { /* do stuff */ },\n  monthchange: (evt) =\u003e { /* do stuff */ },\n  // ...\n};\nconst myPicker = new BirthdayPicker('#my-element', options);\n```\n\n#### example using all event-listener possibilities\nsee the event sequence!\n```js\nimport BirthdayPicker from 'birthdaypicker';\nconst options = {\n  datechange: (evt) =\u003e {\n    console.log('i am: 1st');\n  },\n};\nconst pickerEl = document.getElementById('my-element');\nconst picker = new BirthdayPicker(pickerEl, options);\n\n// on instance\npicker.addEventListener('datechange', (evt) =\u003e {\n  console.log('i am: 2nd');\n});\n\n// on DOM element\npickerEl.addEventListener('datechange', (evt) =\u003e {\n  console.log('i am: 3rd');\n});\n```\n\n### API / static Methods\n#### createLocale()\n```js\n// used to create a locale object for the selected language\n// parameter: (string, required)\n// eg.: 'de' | 'en' | 'fr'\n// returns an object for the given language (if language not found defaults to english 'en')\n// is added to BirthdayPicker.i18n\nBirthdayPicker.createLocale('de')\n```\n#### getInstance()\n```js\n// returns the instance\n// (if the element has previously been initialized with new BirthdayPicker('#myBP')\n// returns either the instance ore false\nhtmlElement = document.getElementById('#myBP');\nBirthdayPicker.getInstance(htmlElement)\n```\n\n#### setMonthFormat()\n```js\n// sets the MonthFormat (select boxes) for all instances\n// format: 'short' | 'long' | 'numeric'\nBirthdayPicker.setMonthFormat('short')\n```\n\n#### kill()\n```js\n// kill all eventListeners\nhtmlElement = document.getElementById('#myBP');\nBirthdayPicker.kill(htmlElement)\n```\n\n#### killAll()\n```js\n// kill all registered instances\nBirthdayPicker.killAll()\n```\n\n### API / static Properties\n```js\n// an object with all languages cerated\nBirthdayPicker.i18n\n\n// shows the current global language as string (2 chars, e.g.: 'en' | 'de')\nBirthdayPicker.currentLocale\n```\n\n### Demo\nA **small demo** of this tool can be view here: [BirthdayPicker Demo](https://lemon3.github.io/birthdaypicker/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\n### Prerequisites\n\nyou need to have **node** and **pnpm**.\nskip to prerequisites if you already have this installed ;)\n\n1. Install node\n   1. download [download here](https://nodejs.org/en/download/)\n   2. via brew\n    ```Bash\n    brew install node\n    ```\n\n2. Install pnpm:\n  see here: https://pnpm.io/installation\n\n### Installation\n\n1. Clone the repo\n   ```Bash\n   git clone https://github.com/lemon3/birthdaypicker.git\n   ```\n2. cd into the cloned repo\n    ```Bash\n    cd birthdaypicker\n    ```\n3. Install packages\n    ```Bash\n    pnpm install\n    ```\n4. start (dev)\n    ```Bash\n    pnpm dev\n    ```\nTo see all available scripts, open the **package.json** file or run\n```Bash\npnpm run\n```\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Roadmap\n\n- be able to define lowerLimit and upperLimit via new Date()\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTACT --\u003e\n## Contact\n\nWolfgang Jungmayer - lemon3.at\n\nProject Link: [https://github.com/lemon3/birthdaypicker](https://github.com/lemon3/birthdaypicker)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003ecoded with ❤ in vienna\u003cbr\u003eby wolfgang jungmayer\u003c/div\u003e\n\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n[license-shield]: https://img.shields.io/github/license/lemon3/birthdaypicker?style=for-the-badge\n[license-url]: https://github.com/lemon3/birthdaypicker/blob/main/LICENSE\n\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[linkedin-url]: https://www.linkedin.com/in/wolfgangjungmayer/\n\n[mincoverage-shield]: https://img.shields.io/nycrc/lemon3/birthdaypicker?style=for-the-badge\n\n[minified-shield]: https://img.shields.io/github/size/lemon3/birthdaypicker/dist/birthdaypicker.umd.js?label=Minified%20Size\u0026style=for-the-badge\n\n[minified-gzip-shield]: https://img.shields.io/badge/minified%20gzip%20Size-4.7%20KB-blue?style=for-the-badge\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemon3%2Fbirthdaypicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flemon3%2Fbirthdaypicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemon3%2Fbirthdaypicker/lists"}