An add-on for https://github.com/eternicode/bootstrap-datepicker 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.
http://niftylettuce.com/bootstrap-datepicker-mobile
You must have the following scripts and stylesheets in the <head>
tag of your HTML layout (please adjust paths accordingly):
<html>
<head>
<!-- ... -->
<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>
</head>
<!-- ... -->
</html>
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>
</body>
</html>
We recommend that you install into your project using Bower, but you can use RawGit if needed.
- Install with Bower:
bower install -S bootstrap-datepicker-mobile
- Include the script in your HTML layout:
<script src="/bower/bootstrap-datepicker-mobile/bootstrap-datepicker-mobile.js"></script>
- See usage below.
- Include the script in your HTML layout:
<script src="//cdn.rawgit.com/niftylettuce/bootstrap-datepicker-mobile/9999ca720ebf89600bda1659c96a291dc447ff39/bootstrap-datepicker-mobile.js"></script>
- See usage below.
To integrate this add-on, simply follow these three rules and use the example as a guide:
- Always add the class of
date-picker
on date inputs to activate this add-on for the input. - Render dates formatted as
MM/DD/YY
for defaultinput
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>
</div>
<!-- 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" />
</div>
</div>
</form>
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');
app.post('/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');
else
birthday = moment(birthday);
// save to db here or something
next();
});
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 viaModernizr.inputtypes.date
)
* 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.