{"id":13837071,"url":"https://github.com/nazar-pc/PickMeUp","last_synced_at":"2025-07-10T16:32:00.202Z","repository":{"id":41322073,"uuid":"14348262","full_name":"nazar-pc/PickMeUp","owner":"nazar-pc","description":"Really simple, powerful, customizable and lightweight standalone datepicker","archived":true,"fork":false,"pushed_at":"2022-07-15T19:17:24.000Z","size":886,"stargazers_count":616,"open_issues_count":17,"forks_count":189,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-11-13T07:37:06.731Z","etag":null,"topics":["datepicker","javascript","pickmeup"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nazar-pc.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"copying.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-12T23:22:48.000Z","updated_at":"2024-09-21T23:03:45.000Z","dependencies_parsed_at":"2022-07-31T04:37:51.809Z","dependency_job_id":null,"html_url":"https://github.com/nazar-pc/PickMeUp","commit_stats":null,"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nazar-pc%2FPickMeUp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nazar-pc%2FPickMeUp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nazar-pc%2FPickMeUp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nazar-pc%2FPickMeUp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nazar-pc","download_url":"https://codeload.github.com/nazar-pc/PickMeUp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225648262,"owners_count":17502174,"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":["datepicker","javascript","pickmeup"],"created_at":"2024-08-04T15:01:00.525Z","updated_at":"2024-11-20T23:32:16.857Z","avatar_url":"https://github.com/nazar-pc.png","language":"JavaScript","funding_links":["https://www.patreon.com/nazarpc"],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# ⚠️ Project is archived\n\nI have created this library library many years ago and didn't update it in last few years due to not working with frontend anymore.\n\nWith that I decided to archive the project.\n\nIf you'd like to step in maintaining and modernize the project with the original vision in mind, please reach out via email.\n\n## PickMeUp - Really simple, powerful, customizable and lightweight standalone datepicker\n\nNo dependencies, single/range/multiple selections, ability to put custom content into dates, very flexible styling and customization abilities.\n\nWritten and maintained by Nazar Mokrynskyi with the help of awesome [contributors](https://github.com/nazar-pc/PickMeUp/graphs/contributors)\n\nBased on DatePicker by Stefan Petre\n\nBrowser support:\n* IE 10+\n* 2 latest stable versions of Firefox, Chromium, Opera and Edge\n\nIf you find this project useful, consider supporting its development on [patreon.com/nazarpc](https://www.patreon.com/nazarpc), this would help me a lot!\n\nOr if you are representing a company, here is [Faircode page](https://faircode.io/product/PickMeUp?utm_source=badge\u0026utm_medium=badgelarge\u0026utm_campaign=PickMeUp).\n\n## [Demo](http://nazar-pc.github.io/PickMeUp)\n\n## Getting started\nYou need only 2 files: `dist/pickmeup.min.js` and `css/pickmeup.css`.\n\nThe plugin can also be loaded as AMD or CommonJS module.\n\nThen you can apply datepicker to any element:\n```javascript\npickmeup('.date');\n```\nGlobal default options are stored in `pickmeup.defaults`\n\nThey can be redefined during initialization:\n```javascript\npickmeup('.date', {\n\tformat\t: 'Y-m-d'\n});\n```\n\nor with data-attributes with `pmu-` prefix:\n```html\n\u003cdiv class=\"date\" data-pmu-format=\"Y-m-d\"\u003e\u003c/div\u003e\n```\n\n## Twitter Bootstrap integration\nFor Twitter Bootstrap integration you do not need to include style file, but you need to include `jquery.pickmeup.twitter-bootstrap.js` instead,\nthat will read settings of current Bootstrap theme and apply them to PickMeUp, so that it will look similar to native Bootstrap elements.\n\nTo apply integrated version use `$(...).pickmeup_twitter_bootstrap()` plugin for initialization:\n```javascript\n$('.date').pickmeup_twitter_bootstrap();\n```\nAll options and events are the same.\n\n## UIkit integration\nFor UIkit integration you do not need to include style file, but you need to include `jquery.pickmeup.uikit.js` instead,\nthat will read settings of current UIkit theme and apply them to PickMeUp, so that it will look similar to native UIkit elements.\n\nTo apply integrated version use `$(...).pickmeup_uikit()` plugin for initialization:\n```javascript\n$('.date').pickmeup_uikit();\n```\nAll options and events are the same.\n\n\n## Configuration options\n| Option                    | Value type                        | Default                           | Description                                                                                                                                                                              |\n|---------------------------|-----------------------------------|-----------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| date                      | array/number/object/string        | new Date                          | Selected date after initialization. Can be single date string/object or array depending on selection mode                                                                                |\n| default_date              | boolean                           | true                              | If `false` will keep empty value until date selected                                                                                                                                     |\n| current                   | number/object/string              | date                              | Represents date that will be in the center of rendered calendar, defaults to `date` option's value                                                                                       |\n| flat                      | boolean                           | false                             | Whatever if the date picker is appended to the element or triggered by an event                                                                                                          |\n| first_day                 | 0/1                               | 1                                 | First day of week: 0 - Sunday, 1 - Monday                                                                                                                                                |\n| prev                      | string                            | \u0026#9664;                           | Previous button content                                                                                                                                                                  |\n| next                      | string                            | \u0026#9654;                           | Next button content                                                                                                                                                                      |\n| mode                      | single/multiple/range             | single                            | Date selection mode                                                                                                                                                                      |\n| select_day                | boolean                           | true                              | Allow or deny days selection                                                                                                                                                             |\n| select_month              | boolean                           | true                              | Allow or deny months selection                                                                                                                                                           |\n| select_year               | boolean                           | true                              | Allow or deny year selection                                                                                                                                                             |\n| view                      | days/months/years                 | days                              | View mode after initialization                                                                                                                                                           |\n| calendars                 | int                               | 1                                 | Number of calendars, that will be rendered                                                                                                                                               |\n| format                    | string                            | d-m-Y                             | Date format (aAbBCdeHIjklmMpPsSuwyY are supported)                                                                                                                                       |\n| title_format              | string/function                   | B, Y                              | Date format for calendar title in days view (aAbBCdeHIjklmMpPsSuwyY are supported). If function, must return the full title as a string. The date and locale are provided as parameters. |\n| position                  | top/right/bottom/left/function    | bottom                            | Date picker's position relative to the triggered element, if function - must return an object with `left` and `top` keys and include units                                               |\n| class_name                | string                            |                                   | Class to be added to root datepicker element                                                                                                                                             |\n| hide_on_select            | boolean                           | false                             | If `true` - datepicker will be hidden after selection (for range mode allows to select first and last days)                                                                              |\n| min                       | number/object/string              |                                   | Min date available for selection                                                                                                                                                         |\n| max                       | number/object/string              |                                   | Max date available for selection                                                                                                                                                         |\n| separator                 | string                            | ` - `                             | Is used for joining separate dates in multiple mode and first/last dates in range mode                                                                                                   |\n| locale                    | string                            | en                                | String, that specifies current locale.                                                                                                                                                   |\n| locales                   | object                            | see [Localization](#localization) | Key-value object, where keys are locales and values contain localized days of week names and months                                                                                      |\n| render                    | function                          |                                   | Executed for each day element rendering, takes date argument, allows to select, disable or add class to element                                                                          |\n| instance_template         | function                          | (look at source code)             | Responsible for rendering simple PickMeUp instance with header and days of weeks                                                                                                         |\n| instance_content_template | function                          | (look at source code)             | Responsible for rendering instance content container (which contains years, months or days)                                                                                              |\n\n##### Selecting/disabling dates with custom logic\n`render` options might return object with any of following keys:\n* `selected`: if `true` - date will be selected\n* `disabled`: if `true` - date will be disabled\n* `class_name`: will be added to class of day element\n\nExample:\n```javascript\nvar now = new Date;\npickmeup(element, {\n    render : function (date) {\n        if (date \u003c now) {\n            return {disabled : true, class_name : 'date-in-past'};\n        }\n        return {};\n    } \n})\n```\n\n## Events callbacks\nIn PickMeUp events are native DOM events fired on element when `pickmeup()` was called and always have `pickmeup-` prefix.\n\n##### pickmeup-change\nTriggered at date change. Example:\n```javascript\npickmeup(element);\nelement.addEventListener('pickmeup-change', function (e) {\n    console.log(e.detail.formatted_date); // New date according to current format\n    console.log(e.detail.date);           // New date as Date object\n})\n```\n\n##### pickmeup-show\nTriggered at showing. Example:\n```javascript\npickmeup(element);\nelement.addEventListener('pickmeup-show', function (e) {\n    e.preventDefault(); // Showing can be canceled if needed\n})\n```\n\n##### pickmeup-hide\nTriggered at hiding. Example:\n```javascript\npickmeup(element);\nelement.addEventListener('pickmeup-hide', function (e) {\n    e.preventDefault(); // Hiding can be canceled if needed\n})\n```\n\n##### pickmeup-fill\nTriggered after filling of PickMeUp container with new markup of days, months, years.\nMay be needed for inner datepicker markup editing.\n```javascript\npickmeup(element);\nelement.addEventListener('pickmeup-fill', function (e) {\n    // Do stuff here\n})\n```\n\n## Methods\nMethods allows external control on datepicker\n\n##### Hide\n```javascript\npickmeup('.date').hide();\n```\n\n##### Show\n```javascript\npickmeup('.date').show();\n```\n\n##### Prev\n```javascript\npickmeup('.date').prev();\n```\n\n##### Next\n```javascript\npickmeup('.date').next();\n```\n\n##### Get date\n```javascript\npickmeup('.date').get_date(formatted);\n```\n`formatted` - boolean or string (default `false`)\n* `false` - `Date` object\n* `true` - string formatted in accordance with `format` option\n* string is used to specify custom format instead if given during initialization\n\n##### Set date\n```javascript\npickmeup('.date').set_date(new Date);\n```\n`date` - can be single date string/object or array depending on selection mode\n\n##### Clear multiple selection\n```javascript\npickmeup('.date').clear();\n```\n\n##### Update datepicker\n```javascript\npickmeup('.date').update();\n```\n\n##### Destroy datepicker\nDestroys PickMeUp instance, removes created markup, restores everything that was changed to original state.\n```javascript\npickmeup('.date').destroy();\n```\n\n## Localization\nYou can add locales to global defaults and then use different locales in particular instance with `locale` option.\nSample object for English language (no need to add, already included in source code):\n````javascript\npickmeup.defaults.locales['en'] = {\n\tdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n\tdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n\tdaysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],\n\tmonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],\n\tmonthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n};\n````\n\nRussian:\n````javascript\npickmeup.defaults.locales['ru'] = {\n\tdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],\n\tdaysShort: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],\n\tdaysMin: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],\n\tmonths: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],\n\tmonthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек']\n};\n````\n\n## Other\nCurrent options (for whatever reason) can be accessed as `element.__pickmeup.options`.\n\nRoot pickmeup element can be accessed as `element.__pickmeup.element`.\n\n## Styling\nIf you want other colors - just change several variables in scss file.\n\nTo change size - adjust `font-size` for root datepicker element, everything will scale nicely.\n\n## Contribution\nFeel free to create issues and send pull requests, they are highly appreciated!\n\nBefore reporting an issue, be so kind to prepare reproducible example on jsfiddle.net, please.\n\nYou can start with working demo of latest stable version of PickMeUp: [jsfiddle.net/0kg5jL3p](https://jsfiddle.net/qx152r6r/)\n\n## License\nZero-Clause BSD\n\nhttps://opensource.org/licenses/0BSD\n\nhttps://tldrlegal.com/license/bsd-0-clause-license \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnazar-pc%2FPickMeUp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnazar-pc%2FPickMeUp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnazar-pc%2FPickMeUp/lists"}