bootstrap-datepicker-mobile Bower Packagist

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.

3 years after


MIT License Gratipay

An add-on for to add responsive support for mobile devices with consideration for native input[type=date] support using Modernizr and Moment.js.



Try resizing your browser window, loading this on a mobile device, and comparing it with a desktop web-browser. It's magical.


You must have the following scripts and stylesheets in the <head> tag of your HTML layout (please adjust paths accordingly):

    <!-- ... -->
    <link rel="stylesheet" href="/bower/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/bower/bootstrap-datepicker/css/datepicker3.css">
    <script src="/bower/modernizr/modernizr.js"></script>
  <!-- ... -->

You must have the following before the closing </body> tag of your HTML layout (please adjust paths accordingly):

    <!-- ... -->
    <script src="/bower/jquery/dist/jquery.js"></script>
    <script src="/bower/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/bower/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="/bower/moment/moment.js"></script>
    <script src="/bower/bootstrap-datepicker-mobile/bootstrap-datepicker-mobile.js"></script>


We recommend that you install into your project using Bower, but you can use RawGit if needed.


  1. Install with Bower:

    bower install -S bootstrap-datepicker-mobile
  2. Include the script in your HTML layout:

    <script src="/bower/bootstrap-datepicker-mobile/bootstrap-datepicker-mobile.js"></script>
  3. See usage below.


  1. Include the script in your HTML layout:

    <script src="//"></script>
  2. See usage below.



To integrate this add-on, simply follow these three rules and use the example as a guide:

  1. Always add the class of date-picker on date inputs to activate this add-on for the input.
  2. Render dates formatted as MM/DD/YY for default input values (e.g. <input value="02/01/99" />).


Here is an example of how to use this add-on for a "birthday" field with Bootstrap v3 and Font Awesome:

<form action="/save-birthday" method="POST">
  <div class="form-group">
    <label class="control-label">Birthday</label>
    <div class="input-group">

      <div class="input-group-addon">
        <i class="fa fa-calendar"></i>

      <!-- this is where the magic happens -->
      <input 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" />



When parsing a <form> request body server-side, you must consider the following two possible scenarios:

  • The value for an input is passed in the "YYYY-MM-DD" format (if native input[type=date] is used)
  • The value for an input is passed in the "MM/DD/YY" format

Therefore, you should parse the date using Moment.js and then store accordingly in your database.

To consider these two scenarios, here's how you might write your server-side request body parsing with JavaScript and Node.js:

var moment = require('moment');'/save-birthday', function(req, res, next) {

  if (typeof req.body.birthday !== 'string')
    return next(new Error('Birthday missing'));

  var nativeDateFormat = /^\d{4}-\d{2}-\d{2}$/;
  var datepickerDateFormat = /^\d{2}\/\d{2}\/\d{2}$/;

  var birthday = req.body.birthday;

  if (nativeDateFormat.test(birthday))
    birthday = moment(birthday, 'YYYY-MM-DD');
  else if (datepickerDateFormat.test(birthday))
    birthday = moment(birthday, 'MM/DD/YY');
    birthday = moment(birthday);

  // save to db here or something


How does it work?

As soon as the script is loaded, it will automatically render the page properly based on:

  • If the device is a touch-screen (using Modernizr via Modernizr.touch)
  • If the viewport is of a mobile screen width (<= 480px wide*)
  • If the device has support for input[type=date] (using Modernizr via

* This width adheres with default Bootstrap v3 @screen-xs value of 480px and mobile matrices).

What does the add-on consider when rendering datepickers?

  • It considers if the device is a touch-screen (if so, it removes bootstrap-datepicker)
  • It considers viewport resizing, and when resized it auto-adjusts properly via $(window).resize jQuery function.
  • It considers whether the user was focused on an input when they resized (and if so, it will show the bootstrap-datepicker).
  • It considers if the device has native support for input[type=date]
  • It considers if the device's viewport is (<= 480px) wide (if it is mobile)


Set the default of autoclose to true for a better user experience:

$.fn.datepicker.defaults.autoclose = true;

When viewed on an iOS device the date picker will use iOS buttons by default which can affect the width of the control. To work around that add the following to the controls CSS class.

  -webkit-appearance: none;
  -moz-appearance: none;


Currently 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.

If 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.

We highly recommend using Moment.js for working with dates (both server-side and client-side).

This project also supports the native RFC 3339 format of YYYY-MM-DD when input[type=date]'s are initiated.




Related Repositories



Material design theme for Bootstrap 3 and 4 ...



Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzi ...



Amaze UI, a mobile-first and modular front-end framework. ...



Free Bootstrap Material Design UI Kit ...



Free Bootstrap Material Design UI Kit ...

Top Contributors

niftylettuce bryanstrader


-   0.0.1 zip tar