{"_id":"pikaday-responsive","_rev":"4-958a068d04e0ce7b56d0c8a2112f0c08","name":"pikaday-responsive","description":"Pikaday Responsive\r =================","dist-tags":{"latest":"0.7.0"},"versions":{"0.6.8":{"name":"pikaday-responsive","version":"0.6.8","devDependencies":{"grunt":"~0.4.5","grunt-bower-install-simple":"^1.2.1","grunt-bower-update":"^0.1.2","grunt-contrib-concat":"^0.5.0","grunt-contrib-cssmin":"^0.14.0","grunt-contrib-sass":"^0.9.2","grunt-contrib-uglify":"^0.11.1","grunt-modernizr":"~1"},"gitHead":"eba4ebffd2fead6d9d38ac2292e28c457166e5ed","description":"Pikaday Responsive\r =================","_id":"pikaday-responsive@0.6.8","scripts":{},"_shasum":"1f671acef67ee8304f7cba953b408051b2d4f929","_from":".","_npmVersion":"3.8.5","_nodeVersion":"4.4.0","_npmUser":{"name":"mydea","email":"francesconovy@gmail.com"},"dist":{"shasum":"1f671acef67ee8304f7cba953b408051b2d4f929","tarball":"https://registry.npmjs.org/pikaday-responsive/-/pikaday-responsive-0.6.8.tgz","integrity":"sha512-gLYloj+uHb96sfCFX9l8DpJqJqyBklQe6Sbf022BSB57cDLgR8fdsiYGBGVTbRbsK0jD83YZz2I3z/heQE2AlQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgelHGj8MDEp2zg+PbH+HuQp6jCLMjJKSytpPmmtY5+AiAHYFAkcvSYH2IVOMeSqb321plLsZXaRSrntH/sy9oUyQ=="}]},"maintainers":[{"name":"mydea","email":"francesconovy@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/pikaday-responsive-0.6.8.tgz_1462576537372_0.9573636325076222"}},"0.7.0":{"name":"pikaday-responsive","version":"0.7.0","devDependencies":{"grunt":"~0.4.5","grunt-bower-install-simple":"^1.2.1","grunt-bower-update":"^0.1.2","grunt-contrib-concat":"^0.5.0","grunt-contrib-cssmin":"^0.14.0","grunt-contrib-sass":"^0.9.2","grunt-contrib-uglify":"^0.11.1","grunt-modernizr":"~1"},"gitHead":"7d9f9b4241b36f9f7dfc0804ac8ca0fca770a6aa","description":"Pikaday Responsive\r =================","_id":"pikaday-responsive@0.7.0","scripts":{},"_shasum":"373307defcb18ae5c901968eb444e1167230121a","_from":".","_npmVersion":"3.10.5","_nodeVersion":"4.4.0","_npmUser":{"name":"mydea","email":"francesconovy@gmail.com"},"dist":{"shasum":"373307defcb18ae5c901968eb444e1167230121a","tarball":"https://registry.npmjs.org/pikaday-responsive/-/pikaday-responsive-0.7.0.tgz","integrity":"sha512-HZ1dEqY0bnGrtXZbKA4DHgkEsoGvXlIvcp6KEWCX8ce/ibTrYqWmVza0/ZttXxTIyLjhyMSGkqS3TcEmVkDkdg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVpC6WD9v225jox+hqvah9ITTpbSFahEwcuwoMTuXTsAiEA4jPI0rO9lkMGJcKl7WqOsBrASWDHPhIFWD/Ajunb0zU="}]},"maintainers":[{"name":"mydea","email":"francesconovy@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/pikaday-responsive-0.7.0.tgz_1470813681919_0.04803251940757036"}}},"readme":"Pikaday Responsive\r\n=================\r\n\r\nA responsive datepicker built on top of Pikaday. It shows the native datepicker on mobile devices and a nice JS-picker on desktop. It is realised as a jQuery-Plugin.\r\n\r\nPikaday is a nice and lean datepicker. For more details, see here: https://github.com/dbushell/Pikaday\r\n\r\nTry the demo: https://mydea.github.io/PikadayResponsive/\r\n\r\nTry it on mobile, too:\r\n\r\n\r\n\r\n## Why?\r\nPikaday is a great datepicker, and there are a lot of other datepickers out there that work really well. However, all of them fall short when used on a mobile device, where the native datepickers work best (because they have been specifically optimised for the mobile experience). Native Datepickers have some drawbacks, though:\r\n\r\n* The output format cannot be customized\r\n* While they work quite reliably on mobile devices, support on desktop devices is either non-existing (Firefox) or their UX is rather terrible (Chrome).\r\n\r\nPikadayResponsive tries to solve this problem.\r\n\r\n## How it works\r\nBasically, PikadayResponsive tries to detect if you are on a mobile device. For this, Modernizr is used (altough you can choose to use a different feature detection library if you want). It checks for touch and HTML5 input-type date support, and if one of them is missing, it simply displays a Pikaday-datepicker.\r\n\r\nIf, however, touch AND HTML5-date support are detected, it will instead display a native input type=\"date\". Over this native input field, another, readonly and click-trough input field is displayed, in which a formatted date is displayed.\r\n\r\n## Dependencies\r\nPikadayResponsive needs the following components to work:\r\n\r\n* jQuery\r\n* Moment.js (for date formatting)\r\n* Pikaday (https://github.com/dbushell/Pikaday)\r\n* Modernizr or other feature detection library\r\n\r\nYou can also use pikaday-package.js, which bundles Moment.js, Pikaday, and Pikaday Responsive. It does not, however, contain jQuery and Modernizr - you have to add them manually. The dist/ directory contains the package files, a directory package_components/ which contains the individual files the package bundles, and a directory dependencies/ which contains jQuery and an automatically generated copy of modernizr pared down to only the features PikayResponsive requires.\r\n\r\nTo build a fresh copy of the package, with the latest version of the dependencies, simply download or clone the directory, and run `npm install` followed by `grunt`.\r\n\r\n## Usage\r\nYou can install PikadayResponsive via Bower:\r\n\r\n```console\r\nbower install pikaday-responsive --save\r\n```\r\n\r\nYou will need to include the following scripts at the bottom of your site:\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\nor alternatively:\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n```\r\n\r\nAnd in the head-section\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\nAs mentioned above, you can also use head.js or another feature detection library instead of Moderizr.\r\n\r\nThe CSS-file contains the basic styles for the Pikaday-Datepicker. You can change/overwrite them as you wish.\r\n\r\nTo use it, call the following on an input field:\r\n\r\nHTML:\r\n\r\n```html\r\n\r\n```\r\n\r\nJS:\r\n\r\n```js\r\nvar dateObject = pikadayResponsive(document.getElementById(\"date\"));\r\n```\r\n\r\nThe `dateObject` returned from `pikadayResponsive()` is a POJO (plain old JavaScript object) with the following properties:\r\n\r\n```javascript\r\ndateObject = {\r\n pikaday: null, // This is either null (if native date is used) or the Pikaday-instance\r\n element: input#date1, // The original element\r\n value: \"2015-10-20\", // The current value of the input. This is the date formatted with outputFormat\r\n date: Object, // The Moment.js-Date-Object of the current value\r\n}\r\n```\r\n\r\n\r\n## Setting the date: instance.setDate(newDate)\r\n\r\nIn addition, the dateObject has a function: `setDate()`. This function takes either a Moment.js object, a native JS-Date or a string in the specified `outputFormat`. \r\nOptionally, you can also pass in a format to parse from as second parameter: `instance.setDate(newDate, \"YYYY-MM-DD\")`.\r\nThe input will be set to this value (no matter if it is a native date picker or a Pikaday picker) and a change-event will be triggered.\r\nIf you call `dateObject.setDate(null)`, the field will be cleared. If you want to set the picker to the current day, you can simply call `dateObject.setDate(moment())`.\r\n\r\nWhenever the input changes, the value on the original input will be updated as well and a regular `change` event will be triggered.\r\nAdditonally, a `change-date` event will be triggered on the original input. This event receives the dateObject as its second parameter:\r\n\r\n```js\r\nvar el = document.getElementById(\"date1\");\r\nvar dateObject = pikadayResponsive(el);\r\n$(el).on(\"change-date\", function(e, dateObject) {\r\n // do something with the dateObject\r\n});\r\n```\r\n\r\nNote that the date object is always the same object and that it will automatically update its value/date:\r\n\r\n```js\r\nvar el = document.getElementById(\"date1\");\r\nvar dateObject = pikadayResponsive(el);\r\nconsole.log(dateObject.value); // null\r\n\r\n// The user enters \"2015-10-5\" in the input field\r\nconsole.log(dateObject.value); // 2015-10-5\r\n```\r\n\r\nNote that the fields will not be updated automatically if you change the value programmatically. \r\nYou have to update the date with `setDate()` in order for it to take effect.\r\n\r\n## Configuration\r\nThere are some options to configure PikadayResponsive. Following are the default-values:\r\n\r\n```js\r\npikadayResponsive(document.getElementById(\"date1\"), {\r\n format: \"DD.MM.YYYY\",\r\n outputFormat: \"x\",\r\n checkIfNativeDate: function() {\r\n // return true if native date field should be used\r\n },\r\n placeholder: \"\",\r\n classes: \"\",\r\n dayOffset: 0,\r\n pikadayOptions: {}\r\n});\r\n```\r\n\r\n### format\r\nDetermines how a date will be displayed in the input-field. Has to be a Moment.js format-string, like `DD.MM.YYYY`. \r\nSee [Moment.js Docs](http://momentjs.com/docs/#/displaying/) for all available options.\r\n\r\n### outputFormat\r\nDetermines the output of the field. Basically, this is what you will get if you call `$(\"#date\").val()` or if you submit the form. has to be a Moment.js format-string, like \"YYYY-MM-DD\".\r\nSee [Moment.js Docs](http://momentjs.com/docs/#/displaying/) for all available options.\r\n\r\n### placeholder\r\nThe placeholder for the input-field.\r\n\r\n### classes\r\nA string with classes that should be added to the displayed input-fields\r\n\r\n### dayOffset\r\nA number which is added to the date in Pikaday-mode. This is especially useful when working with timezones. \r\nIf you set a default timezone with moment-timezone, like `moment.tz.setDefault(\"America/Los_Angeles\")`, your dates may turn out wrong if your browser's timezone is different. This is caused if the specified timezone's offset is lower than your browser's timezone offset.\r\nIn this case, the picked date, which might be \"2016-04-12 00:00:00\" in \"America/Los_Angeles\", is converted to your local time zone, e.g. to \"2016-04-11 22:00:00\". This can be very hard to work with.\r\nThe number of days specified here will simply be added to the selected date before it is processed. In the above case, the date that would actually be returned as value would be \"2016-04-12 22:00:00\". \r\n\r\nAn example implementation would be:\r\n\r\n```js\r\nvar defaultOffset = moment.tz(\"Europe/Vienna\")._offset; // This is your client's timezone\r\nvar currentOffset = moment()._offset; // This is your specified timezone\r\n\r\nvar dayOffset = 0;\r\nif(currentOffset < defaultOffset) {\r\n dayOffset = 1;\r\n}\r\n\r\nvar $date1 = $(\"#date1\");\r\nvar instance1 = pikadayResponsive($date1, {\r\n dayOffset: dayOffset\r\n});\r\n```\r\n\r\n### checkIfNativeDate\r\nYou can overwrite this, for example if you don't want to use Modernizr. This has to be a function. \r\nIf this function returns true, the native date picker will be used, otherwise Pikaday will be used.\r\nBy default, the following function is used:\r\n\r\n```js\r\nfunction () {\r\n return Modernizr.inputtypes.date && (Modernizr.touch && navigator.appVersion.indexOf(\"Win\") === -1);\r\n}\r\n```\r\n\r\n### pikadayOptions\r\nAn object with options that will be used to initialize Pikaday. Note that ```field``` and ```format``` will be overridden.\r\n\r\n## Manually opening the date picker\r\n\r\nOpening the date picker from somewhere else on the page can be a bit tricky.\r\nThe best way to do this is by simply using standard HTML labels.\r\nSince 0.7.0, the generated inputs will receive an ID, if the original input had an ID. It will be the original ID + `-input`. \r\nFor example:\r\n\r\n```html\r\n\r\n```\r\n\r\nwill become:\r\n\r\n```html\r\n\r\n```\r\n\r\nThis makes it possible to trigger the date picker from any place on your page with a simple label:\r\n\r\n```html\r\n\r\n```\r\n\r\nSee an example for this on the bottom of the [Demo](https://mydea.github.io/PikadayResponsive/).\r\n\r\n## Changelog\r\n\r\nFor changes, see the [Changelog](CHANGELOG.md)\r\n\r\nAdditionally, please note the breaking changes from 0.5 to 0.6: [Information about upgrading to >= 0.6.0](upgrading-to-v0-6.md)\r\n\r\n## Author\r\nPikadayResponsive has been created by Francesco Novy | http://www.fnovy.com | francesconovy@gmail.com | @_fnovy\r\n\r\n## Credits\r\nCredits go to David Bushell and Ramiro Rikkert for creating Pikaday.\r\n\r\n* David Bushell http://dbushell.com @dbushell\r\n* Ramiro Rikkert GitHub @RamRik\r\n\r\n## Copyright\r\nCopyright © 2016 Francesco Novy | MIT license\r\n","maintainers":[{"name":"mydea","email":"francesconovy@gmail.com"}],"time":{"modified":"2022-06-23T23:18:10.153Z","created":"2016-05-06T23:15:40.683Z","0.6.8":"2016-05-06T23:15:40.683Z","0.7.0":"2016-08-10T07:21:24.018Z"},"readmeFilename":"README.md"}