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