{"id":16001258,"url":"https://github.com/gimenete/bootstrap-datepicker-mobile","last_synced_at":"2026-01-02T17:10:17.612Z","repository":{"id":24831633,"uuid":"28246280","full_name":"gimenete/bootstrap-datepicker-mobile","owner":"gimenete","description":"An add-on for bootstrap-datepicker to add responsive support for mobile devices with consideration for native input[type=date] support using Modernizr and Moment.js.","archived":false,"fork":false,"pushed_at":"2014-12-19T20:32:32.000Z","size":67,"stargazers_count":0,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-22T12:11:26.806Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://niftylettuce.com/bootstrap-datepicker-mobile","language":null,"has_issues":false,"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/gimenete.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":"2014-12-19T21:06:06.000Z","updated_at":"2014-12-19T20:22:00.000Z","dependencies_parsed_at":"2022-08-22T16:51:00.405Z","dependency_job_id":null,"html_url":"https://github.com/gimenete/bootstrap-datepicker-mobile","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gimenete%2Fbootstrap-datepicker-mobile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gimenete%2Fbootstrap-datepicker-mobile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gimenete%2Fbootstrap-datepicker-mobile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gimenete%2Fbootstrap-datepicker-mobile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gimenete","download_url":"https://codeload.github.com/gimenete/bootstrap-datepicker-mobile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243801688,"owners_count":20350108,"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-10-08T09:41:16.618Z","updated_at":"2026-01-02T17:10:17.565Z","avatar_url":"https://github.com/gimenete.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# bootstrap-datepicker-mobile\n\n[![MIT License][license-image]][license-url]\n[![Gratipay][gratipay-image]][gratipay-url]\n\n\u003e An add-on for \u003chttps://github.com/eternicode/bootstrap-datepicker\u003e to add responsive support for mobile devices with consideration for native `input[type=date]` support using [Modernizr][modernizr] and [Moment.js][momentjs].\n\n## Index\n\n* [Demo](#demo)\n* [Requirements](#requirements)\n* [Install](#install)\n* [Usage](#usage)\n* [How does it work?](#how-does-it-work)\n* [Tips](#tips)\n* [Notes](#notes)\n* [Contributors](#contributors)\n* [License](#license)\n\n\n## Demo\n\nTry resizing your browser window, loading this on a mobile device, and comparing it with a desktop web-browser.  It's magical.\n\n\u003chttp://niftylettuce.com/bootstrap-datepicker-mobile\u003e\n\n\n## Requirements\n\nYou must have the following scripts and stylesheets in the `\u003chead\u003e` tag of your HTML layout (please adjust paths accordingly):\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n    \u003clink rel=\"stylesheet\" href=\"/bower/bootstrap/dist/css/bootstrap.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"/bower/bootstrap-datepicker/css/datepicker3.css\"\u003e\n    \u003cscript src=\"/bower/modernizr/modernizr.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003c!-- ... --\u003e\n\u003c/html\u003e\n```\n\nYou must have the following before the closing `\u003c/body\u003e` tag of your HTML layout (please adjust paths accordingly):\n\n```html\n    \u003c!-- ... --\u003e\n    \u003cscript src=\"/bower/jquery/dist/jquery.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/bower/bootstrap/dist/js/bootstrap.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/bower/bootstrap-datepicker/js/bootstrap-datepicker.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/bower/moment/moment.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/bower/bootstrap-datepicker-mobile/bootstrap-datepicker-mobile.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Install\n\nWe recommend that you install into your project using [Bower][bower], but you can use [RawGit][rawgit] if needed.\n\n### Bower\n\n1. Install with Bower:\n\n  ```bash\n  bower install -S bootstrap-datepicker-mobile\n  ```\n\n2. Include the script in your HTML layout:\n\n  ```html\n  \u003cscript src=\"/bower/bootstrap-datepicker-mobile/bootstrap-datepicker-mobile.js\"\u003e\u003c/script\u003e\n  ```\n\n3. See [usage](#usage) below.\n\n### RawGit\n\n1. Include the script in your HTML layout:\n\n  ```html\n  \u003cscript src=\"//cdn.rawgit.com/niftylettuce/bootstrap-datepicker-mobile/9999ca720ebf89600bda1659c96a291dc447ff39/bootstrap-datepicker-mobile.js\"\u003e\u003c/script\u003e\n  ```\n\n2. See [usage](#usage) below.\n\n\n## Usage\n\n### Client-side\n\nTo integrate this add-on, simply follow these three rules and [use the example](#example) as a guide:\n\n1. Always add the class of `date-picker` on date inputs to activate this add-on for the input.\n2. Render dates formatted as `MM/DD/YY` for default `input` values (e.g. `\u003cinput value=\"02/01/99\" /\u003e`).\n\n#### Example\n\nHere is an example of how to use this add-on for a \"birthday\" field with Bootstrap v3 and [Font Awesome][font-awesome]:\n\n```html\n\u003cform action=\"/save-birthday\" method=\"POST\"\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003clabel class=\"control-label\"\u003eBirthday\u003c/label\u003e\n    \u003cdiv class=\"input-group\"\u003e\n\n      \u003cdiv class=\"input-group-addon\"\u003e\n        \u003ci class=\"fa fa-calendar\"\u003e\u003c/i\u003e\n      \u003c/div\u003e\n\n      \u003c!-- this is where the magic happens --\u003e\n      \u003cinput type=\"text\" class=\"date-picker form-control\" data-date-start-view=\"decade\" data-date-format=\"mm/dd/yy\" data-date=\"02/01/99\" value=\"02/01/99\" name=\"birthday\" placeholder=\"MM/DD/YY\" /\u003e\n\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\n### Server-side\n\nWhen parsing a `\u003cform\u003e` request body server-side, you must consider the following two possible scenarios:\n\n* The value for an input is passed in the \"MM/DD/YY\" format\n* The value for an input is passed in the \"YYYY-MM-DD\" format (if native `input[type=date]` is used)\n\nTherefore, you should parse the date using [Moment.js][momentjs] and then store accordingly in your database.\n\nTo consider these two scenarios, here's how you might write your server-side request body parsing with JavaScript and [Node.js][nodejs]:\n\n```js\nvar moment = require('moment');\n\napp.post('/save-birthday', function(req, res, next) {\n\n  if (typeof req.body.birthday !== 'string')\n    return next(new Error('Birthday missing'));\n\n  var nativeDateFormat = /^\\d{4}-\\d{2}-\\d{2}$/;\n  var datepickerDateFormat = /^\\d{2}\\/\\d{2}\\/\\d{2}$/;\n\n  var birthday = req.body.birthday;\n\n  if (nativeDateFormat.test(birthday))\n    birthday = moment(birthday, 'YYYY-MM-DD');\n  else if (datepickerDateFormat.test(birthday))\n    birthday = moment(birthday, 'MM-DD-YY');\n  else\n    birthday = moment(birthday);\n\n  // save to db here or something\n  next();\n\n});\n```\n\n\n## How does it work?\n\nAs soon as the script is loaded, it will automatically render the page properly based on:\n\n* If the viewport is of a mobile screen width (\u003c= 480px wide\\*)\n* If the device has support for `input[type=date]` (using Modernizr via `Modernizr.inputtypes.date`)\n\n\\* This width adheres with default Bootstrap v3 `@screen-xs` value of `480px` and [mobile matrices][mobile-matrices]).\n\nWhat does the add-on consider when rendering datepickers?\n\n* It considers viewport resizing, and when resized it auto-adjusts properly via `$(window).resize` jQuery function.\n* It considers whether the user was focused on an `input` when they resized (and if so, it will show the datepicker).\n* It considers if the device has native support for `input[type=date]`\n* It considers if the device's viewport is (\u003c= 480px) wide (if it is mobile)\n\n\n## Tips\n\nSet the default of `autoclose` to true for a better user experience:\n\n```js\n$.fn.datepicker.defaults.autoclose = true;\n```\n\n\n## Notes\n\nCurrently we assume that you pre-populate your date `input`'s with the format of `MM/DD/YY`.  If you have the date formatted any other way, this add-on will not work properly.\n\nIf you'd like to add support other formats than `MM-DD-YY` (e.g. some sort of configuration options setup), then please submit a pull request.\n\nWe highly recommend using [Moment.js][momentjs] for working with dates (both server-side and client-side).\n\nThis project also supports the native [RFC 3339][rfc-3339] format of `YYYY-MM-DD` when `input[type=date]`'s are initiated.\n\n\n## Contributors\n\n* [Nick Baugh](https://github.com/niftylettuce)\n\n\n## License\n\n[MIT][license-url]\n\n\n[bower]: http://bower.io\n[rawgit]: http://rawgit.com\n[bootstrap-datepicker]: https://github.com/eternicode/bootstrap-datepicker\n[momentjs]: http://momentjs.com\n[modernizr]: http://modernizr.com\n[rfc-3339]: https://www.ietf.org/rfc/rfc3339.txt\n[mobile-matrices]: https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices\n[font-awesome]: http://fontawesome.io\n[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[license-url]: LICENSE\n[gratipay-image]: https://img.shields.io/gratipay/niftylettuce.svg?style=flat\n[gratipay-url]: https://gratipay.com/niftylettuce\n[nodejs]: http://nodejs.org\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgimenete%2Fbootstrap-datepicker-mobile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgimenete%2Fbootstrap-datepicker-mobile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgimenete%2Fbootstrap-datepicker-mobile/lists"}