{"id":13394188,"url":"https://github.com/Pikaday/Pikaday","last_synced_at":"2025-03-13T20:31:22.885Z","repository":{"id":4963569,"uuid":"6121126","full_name":"Pikaday/Pikaday","owner":"Pikaday","description":"A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS","archived":false,"fork":false,"pushed_at":"2024-07-11T07:38:08.000Z","size":594,"stargazers_count":8011,"open_issues_count":328,"forks_count":1310,"subscribers_count":169,"default_branch":"master","last_synced_at":"2024-10-29T16:19:00.125Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"brianfrankcooper/YCSB","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pikaday.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":"2012-10-08T07:51:03.000Z","updated_at":"2024-10-28T20:08:01.000Z","dependencies_parsed_at":"2024-09-25T00:00:55.745Z","dependency_job_id":"958316c5-d4ee-436c-9d36-d84a45925f36","html_url":"https://github.com/Pikaday/Pikaday","commit_stats":{"total_commits":338,"total_committers":104,"mean_commits":3.25,"dds":0.7278106508875739,"last_synced_commit":"21f676e70d688d18b265f2c12fc38e8457c20645"},"previous_names":["dbushell/pikaday"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pikaday%2FPikaday","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pikaday%2FPikaday/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pikaday%2FPikaday/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pikaday%2FPikaday/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pikaday","download_url":"https://codeload.github.com/Pikaday/Pikaday/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241673494,"owners_count":20000950,"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":[],"created_at":"2024-07-30T17:01:11.891Z","updated_at":"2025-03-13T20:31:22.849Z","avatar_url":"https://github.com/Pikaday.png","language":"JavaScript","readme":"Pikaday\n========\n\n[![NPM version][npm-image]][npm-url]\n[![License][license-image]][license-url]\n[![Downloads][downloads-image]][downloads-url]\n\n\n### A refreshing JavaScript Datepicker\n\n* Lightweight (less than 5kb minified and gzipped)\n* No dependencies (but plays well with [Moment.js][moment])\n* Modular CSS classes for easy styling\n\n[**Try Pikaday Demo →**][Pikaday]\n\n![Pikaday Screenshot][screenshot]\n\n**Production ready?** Since version 1.0.0 Pikaday is stable and used in production. If you do however find bugs or have feature requests please submit them to the [GitHub issue tracker][issues].\nAlso see the [changelog](CHANGELOG.md)\n\n## Installation\nYou can install Pikaday as an NPM package:\n\n```shell\nnpm install pikaday\n```\n\nOr link directly to the CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/pikaday/pikaday.js\"\u003e\u003c/script\u003e\n```\n\n## Styles\nYou will also need to include Pikaday CSS file. This step depends on how Pikaday was installed. Either import from NPM:\n\n```css\n@import './node_modules/pikaday/css/pikaday.css';\n```\n\nOr link to the CDN:\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css\"\u003e\n```\n\n## Usage\n\n**Pikaday** can be bound to an input field:\n\n```html\n\u003cinput type=\"text\" id=\"datepicker\"\u003e\n```\n\nAdd the JavaScript to the end of your document:\n\n```html\n\u003cscript src=\"pikaday.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    var picker = new Pikaday({ field: document.getElementById('datepicker') });\n\u003c/script\u003e\n```\n\nIf you're using **jQuery** make sure to pass only the first element:\n\n```javascript\nvar picker = new Pikaday({ field: $('#datepicker')[0] });\n```\n\nIf the Pikaday instance is not bound to a field you can append the element anywhere:\n\n```javascript\nvar field = document.getElementById('datepicker');\nvar picker = new Pikaday({\n    onSelect: function(date) {\n        field.value = picker.toString();\n    }\n});\nfield.parentNode.insertBefore(picker.el, field.nextSibling);\n```\n\n### Formatting\n\nBy default, dates are formatted and parsed using standard JavaScript Date object.\nIf [Moment.js][moment] is available in scope, it will be used to format and parse input values. You can pass an additional `format` option to the configuration which will be passed to the `moment` constructor.\nSee the [moment.js example][] for a full version.\n\n```html\n\u003cinput type=\"text\" id=\"datepicker\" value=\"9 Oct 2014\"\u003e\n\n\u003cscript src=\"moment.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"pikaday.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    var picker = new Pikaday({\n        field: document.getElementById('datepicker'),\n        format: 'D MMM YYYY',\n        onSelect: function() {\n            console.log(this.getMoment().format('Do MMMM YYYY'));\n        }\n    });\n\u003c/script\u003e\n```\n\nFor more advanced and flexible formatting you can pass your own `toString` function to the configuration which will be used to format the date object.\nThis function has the following signature:\n\n`toString(date, format = 'YYYY-MM-DD')`\n\nYou should return a string from it.\n\nBe careful, though. If the formatted string that you return cannot be correctly parsed by the `Date.parse` method (or by `moment` if it is available), then you must provide your own `parse` function in the config. This function will be passed the formatted string and the format:\n\n`parse(dateString, format = 'YYYY-MM-DD')`\n\n```javascript\nvar picker = new Pikaday({\n    field: document.getElementById('datepicker'),\n    format: 'D/M/YYYY',\n    toString(date, format) {\n        // you should do formatting based on the passed format,\n        // but we will just return 'D/M/YYYY' for simplicity\n        const day = date.getDate();\n        const month = date.getMonth() + 1;\n        const year = date.getFullYear();\n        return `${day}/${month}/${year}`;\n    },\n    parse(dateString, format) {\n        // dateString is the result of `toString` method\n        const parts = dateString.split('/');\n        const day = parseInt(parts[0], 10);\n        const month = parseInt(parts[1], 10) - 1;\n        const year = parseInt(parts[2], 10);\n        return new Date(year, month, day);\n    }\n});\n```\n\n### Configuration\n\nAs the examples demonstrate above\nPikaday has many useful options:\n\n* `field` bind the datepicker to a form field\n* `trigger` use a different element to trigger opening the datepicker, see [trigger example][] (default to `field`)\n* `bound` automatically show/hide the datepicker on `field` focus (default `true` if `field` is set)\n* `ariaLabel` data-attribute on the input field with an aria assistance text (only applied when `bound` is set)\n* `position` preferred position of the datepicker relative to the form field, e.g.: `top right`, `bottom right` **Note:** automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see [positions example][] (default to 'bottom left')\n* `reposition` can be set to false to not reposition datepicker within the viewport, forcing it to take the configured `position` (default: true)\n* `container` DOM node to render calendar into, see [container example][] (default: undefined)\n* `format` the default output format for `.toString()` and `field` value (requires [Moment.js][moment] for custom formatting)\n* `formatStrict` the default flag for moment's strict date parsing (requires [Moment.js][moment] for custom formatting)\n* `toString(date, format)` function which will be used for custom formatting. This function will take precedence over `moment`.\n* `parse(dateString, format)` function which will be used for parsing input string and getting a date object from it. This function will take precedence over `moment`.\n* `defaultDate` the initial date to view when first opened\n* `setDefaultDate` Boolean (true/false). make the `defaultDate` the initial selected value\n* `firstDay` first day of the week (0: Sunday, 1: Monday, etc)\n* `minDate` the minimum/earliest date that can be selected (this should be a native Date object - e.g. `new Date()` or `moment().toDate()`)\n* `maxDate` the maximum/latest date that can be selected (this should be a native Date object - e.g. `new Date()` or `moment().toDate()`)\n* `disableWeekends` disallow selection of Saturdays or Sundays\n* `disableDayFn` callback function that gets passed a Date object for each day in view. Should return true to disable selection of that day.\n* `yearRange` number of years either side (e.g. `10`) or array of upper/lower range (e.g. `[1900,2015]`)\n* `showWeekNumber` show the ISO week number at the head of the row (default `false`)\n* `pickWholeWeek` select a whole week instead of a day (default `false`)\n* `isRTL` reverse the calendar for right-to-left languages\n* `i18n` language defaults for month and weekday names (see internationalization below)\n* `yearSuffix` additional text to append to the year in the title\n* `showMonthAfterYear` render the month after year in the title (default `false`)\n* `showDaysInNextAndPreviousMonths` render days of the calendar grid that fall in the next or previous months (default: false)\n* `enableSelectionDaysInNextAndPreviousMonths` allows user to select date that is in the next or previous months (default: false)\n* `numberOfMonths` number of visible calendars\n* `mainCalendar` when `numberOfMonths` is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`). Only used for the first display or when a selected date is not already visible\n* `events` array of dates that you would like to differentiate from regular days (e.g. `['Sat Jun 28 2017', 'Sun Jun 29 2017', 'Tue Jul 01 2017',]`)\n* `theme` define a classname that can be used as a hook for styling different themes, see [theme example][] (default `null`)\n* `blurFieldOnSelect` defines if the field is blurred when a date is selected (default `true`)\n* `onSelect` callback function for when a date is selected\n* `onOpen` callback function for when the picker becomes visible\n* `onClose` callback function for when the picker is hidden\n* `onDraw` callback function for when the picker draws a new month\n* `keyboardInput` enable keyboard input support (default `true`)\n\n### Styling\n\nIf the `reposition` configuration-option is enabled (default), Pikaday will apply CSS-classes to the datepicker according to how it is positioned:\n\n* `top-aligned`\n* `left-aligned`\n* `right-aligned`\n* `bottom-aligned`\n\nNote that the DOM element at any time will typically have 2 CSS-classes (eg. `top-aligned right-aligned` etc).\n\n## jQuery Plugin\n\nThe normal version of Pikaday does not require jQuery, however there is a jQuery plugin if that floats your boat (see `plugins/pikaday.jquery.js` in the repository). This version requires jQuery, naturally, and can be used like other plugins:\nSee the [jQuery example][] for a full version.\n\n```html\n\u003cscript src=\"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"pikaday.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"plugins/pikaday.jquery.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\n// activate datepickers for all elements with a class of `datepicker`\n$('.datepicker').pikaday({ firstDay: 1 });\n\n// chain a few methods for the first datepicker, jQuery style!\n$('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042);\n\n\u003c/script\u003e\n```\n\n## AMD support\n\nIf you use a modular script loader, Pikaday is not bound to the global object and will fit nicely in your build process. You can require Pikaday just like any other module.\nSee the [AMD example][] for a full version.\n\n```javascript\nrequire(['pikaday'], function(Pikaday) {\n    var picker = new Pikaday({ field: document.getElementById('datepicker') });\n});\n```\nThe same applies for the jQuery plugin mentioned above.\nSee the [jQuery AMD example][] for a full version.\n\n```javascript\nrequire(['jquery', 'pikaday.jquery'], function($) {\n    $('#datepicker').pikaday();\n});\n```\n\n## CommonJS module support\n\nIf you use a CommonJS compatible environment you can use the require function to import Pikaday.\n\n\n```javascript\nvar pikaday = require('pikaday');\n```\n\nWhen you bundle all your required modules with [Browserify][browserify] and you don't use [Moment.js][moment] specify the ignore option:\n\n`browserify main.js -o bundle.js -i moment`\n\n## Ruby on Rails\n\nIf you're using **Ruby on Rails**, make sure to check out the [Pikaday gem][gem].\n\n## Methods\n\nYou can control the date picker after creation:\n\n```javascript\nvar picker = new Pikaday({ field: document.getElementById('datepicker') });\n```\n\n### Get and set date\n\n`picker.toString('YYYY-MM-DD')`\n\nReturns the selected date in a string format. If [Moment.js][moment] exists (recommended) then Pikaday can return any format that Moment understands.\nYou can also provide your own `toString` function and do the formatting yourself. Read more in the [formatting](#formatting) section.\n\nIf neither `moment` object exists nor `toString` function is provided, JavaScript's default [`.toDateString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toDateString) method will be used.\n\n`picker.getDate()`\n\nReturns a basic JavaScript `Date` object of the selected day, or `null` if no selection.\n\n`picker.setDate('2015-01-01')`\n\nSet the current selection. This will be restricted within the bounds of `minDate` and `maxDate` options if they're specified. You can optionally pass a boolean as the second parameter to prevent triggering of the onSelect callback (true), allowing the date to be set silently.\n\n`picker.getMoment()`\n\nReturns a [Moment.js][moment] object for the selected date (Moment must be loaded before Pikaday).\n\n`picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))`\n\nSet the current selection with a [Moment.js][moment] object (see `setDate` for details).\n\n### Clear and reset date\n\n`picker.clear()`\n\nWill clear and reset the input where picker is bound to.\n\n### Change current view\n\n`picker.gotoDate(new Date(2014, 1))`\n\nChange the current view to see a specific date. This example will jump to February 2014 ([month is a zero-based index][mdn_date]).\n\n`picker.gotoToday()`\n\nShortcut for `picker.gotoDate(new Date())`\n\n`picker.gotoMonth(2)`\n\nChange the current view by month (0: January, 1: Februrary, etc).\n\n`picker.nextMonth()`\n`picker.prevMonth()`\n\nGo to the next or previous month (this will change year if necessary).\n\n`picker.gotoYear()`\n\nChange the year being viewed.\n\n`picker.setMinDate()`\n\nUpdate the minimum/earliest date that can be selected.\n\n`picker.setMaxDate()`\n\nUpdate the maximum/latest date that can be selected.\n\n`picker.setStartRange()`\n\nUpdate the range start date. For using two Pikaday instances to select a date range.\n\n`picker.setEndRange()`\n\nUpdate the range end date. For using two Pikaday instances to select a date range.\n\n### Show and hide datepicker\n\n`picker.isVisible()`\n\nReturns `true` or `false`.\n\n`picker.show()`\n\nMake the picker visible.\n\n`picker.adjustPosition()`\n\nRecalculate and change the position of the picker.\n\n`picker.hide()`\n\nHide the picker making it invisible.\n\n`picker.destroy()`\n\nHide the picker and remove all event listeners — no going back!\n\n### Internationalization\n\nThe default `i18n` configuration format looks like this:\n\n```javascript\ni18n: {\n    previousMonth : 'Previous Month',\n    nextMonth     : 'Next Month',\n    months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],\n    weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],\n    weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']\n}\n```\n\nYou must provide 12 months and 7 weekdays (with abbreviations). Always specify weekdays in this order with Sunday first. You can change the `firstDay` option to reorder if necessary (0: Sunday, 1: Monday, etc). You can also set `isRTL` to `true` for languages that are read right-to-left.\n\n\n## Extensions\n\n### Timepicker\n\nPikaday is a pure datepicker. It will not support picking a time of day. However, there have been efforts to add time support to Pikaday.\nSee [#1][issue1] and [#18][issue18]. These reside in their own fork.\n\nYou can use the work [@owenmead][owenmead] did most recently at [owenmead/Pikaday][owen Pika]\nA more simple time selection approach done by [@xeeali][xeeali] at [xeeali/Pikaday][xeeali Pika] is based on version 1.2.0.\nAlso [@stas][stas] has a fork [stas/Pikaday][stas Pika], but is now quite old\n\n\n## Browser Compatibility\n\n* IE 7+\n* Chrome 8+\n* Firefox 3.5+\n* Safari 3+\n* Opera 10.6+\n\n[![browser compatibility](https://ci.testling.com/rikkert/pikaday.png)\n](https://ci.testling.com/rikkert/pikaday)\n\n\n* * *\n\n## Authors\n\n* David Bushell [https://dbushell.com][Bushell] [@dbushell][Bushell Twitter]\n* Ramiro Rikkert [GitHub][Rikkert] [@RamRik][Rikkert Twitter]\n\nThanks to [@shoogledesigns][shoogledesigns] for the name.\n\nCopyright © 2014 David Bushell | BSD \u0026 MIT license\n\n  [Pikaday]:     https://pikaday.com/                                             \"Pikaday\"\n  [moment]:      http://momentjs.com/                                             \"moment.js\"\n  [browserify]:  http://browserify.org/                                           \"browserify\"\n  [screenshot]:  https://raw.github.com/Pikaday/Pikaday/master/examples/screenshot.png  \"Screenshot\"\n  [issues]:      https://github.com/Pikaday/Pikaday/issues                        \"Issue tracker\"\n  [gem]:         https://rubygems.org/gems/pikaday-gem                            \"RoR gem\"\n  [mdn_date]:    https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date  \"Date\"\n  [Bushell]:     https://dbushell.com/                                            \"dbushell.com\"\n  [Bushell Twitter]: https://twitter.com/dbushell                                 \"@dbushell\"\n  [Rikkert]:     https://github.com/rikkert                                       \"Rikkert GitHub\"\n  [Rikkert Twitter]: https://twitter.com/ramrik                                   \"@ramrik\"\n  [shoogledesigns]:  https://twitter.com/shoogledesigns/status/255209384261586944 \"@shoogledesigns\"\n  [issue1]:      https://github.com/Pikaday/Pikaday/issues/1                      \"Issue 1\"\n  [issue18]:     https://github.com/Pikaday/Pikaday/issues/18                     \"Issue 18\"\n  [stas]:        https://github.com/stas                                          \"@stas\"\n  [stas Pika]:   https://github.com/stas/Pikaday                                  \"Pikaday\"\n  [owenmead]:    https://github.com/owenmead                                      \"@owenmead\"\n  [owen Pika]:   https://github.com/owenmead/Pikaday                              \"Pikaday\"\n  [xeeali]:      https://github.com/xeeali                                        \"@xeeali\"\n  [xeeali Pika]: https://github.com/xeeali/Pikaday                                \"Pikaday\"\n  [moment.js example]: https://pikaday.com/examples/moment.html    \"Pikaday w/ moment.js\"\n  [jQuery example]: https://pikaday.com/examples/jquery.html       \"Pikaday w/ jQuery\"\n  [AMD example]: https://pikaday.com/examples/amd.html             \"Pikaday w/ AMD\"\n  [jQuery AMD example]: https://pikaday.com/examples/jquery-amd.html \"Pikaday w/ jQuery + AMD\"\n  [trigger example]: https://pikaday.com/examples/trigger.html     \"Pikaday using custom trigger\"\n  [positions example]: https://pikaday.com/examples/positions.html \"Pikaday using different position options\"\n  [container example]: https://pikaday.com/examples/container.html \"Pikaday using custom calendar container\"\n  [theme example]: https://pikaday.com/examples/theme.html         \"Pikaday using multiple themes\"\n\n\n\n[npm-image]: https://img.shields.io/npm/v/pikaday.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/pikaday\n[license-image]: https://img.shields.io/:license-mit-blue.svg?style=flat-square\n[license-url]: LICENSE.md\n[downloads-image]: http://img.shields.io/npm/dm/pikaday.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/pikaday\n","funding_links":[],"categories":["JavaScript","UI Components"],"sub_categories":["Date Pickers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPikaday%2FPikaday","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPikaday%2FPikaday","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPikaday%2FPikaday/lists"}