Using Bootstrap3 Datetimepicker in Meteor

I’ve just started using a platform called Meteor to develop web and android apps using JavaScript. So far I’ve found it remarkably well thought out, powerful and easy to use, but there are a few areas where it’s taken me longer to work out how to use a feature.

One such is the Bootstrap3 Datetimepicker. It has extensive documentation but I found it tricky to install and use it under Meteor.

So here is a step by step tutorial in case anybody else is having similar problems. I assume that readers have installed Meteor and done at least one Meteor tutorial.

I’m running Meteor version 1.1.0.2 under Linux Mint 17.1 and these instructions work as of 14th July 2015.

Create a Meteor project

You will need to create a project that includes jQuery, Bootstrap, and the Datetimepicker itself. To do this, open a terminal window and navigate into your Meteor directory. Run the following commands:

meteor create datetimepicker
cd datetimepicker
meteor add jquery
meteor add twbs:bootstrap
meteor add tsega:bootstrap3-datetimepicker

Basic use of Datetimepicker

First, let’s include the Datetimepicker with its default settings and display the date that the user selects. When the user makes a selection, we use “Session” to store the date, formatted as a string.

Replace the contents of datetimepicker.html with this code:

<head>
 <title>datetimepicker</title>
</head>
<body>
 <h1>Bootstrap3 Datetimepicker in Meteor</h1>
{{> say_when}}
</body>
<template name="say_when">
 <div class="input-group datetimepicker">
 <input class="set-due-date form-control" type="text"/>
 <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
 </div>
><p>{{show_date}}</p>
</template>

And replace the contents of datetimepicker.js with this code:

if (Meteor.isClient) {
  Template.say_when.onRendered(function() {
    this.$('.datetimepicker').datetimepicker({
    }).on('dp.change', function(e){
      Session.set("selected", e.date.format());
    });
  });
  Template.say_when.helpers({
    show_date: function(){
      return Session.get("selected");
    }
  });
}

Set some options

You can use Datetimepicker’s options to adjust how your Datetimepicker behaves. Use the options shown below to:

  • Show the current date and time when the page loads
  • Avoid opening the keyboard on mobile devices when the user opens the picker.

Replace the definition of the datetimepicker in datetimepicker.js with this code:

Template.say_when.onRendered(function() {
  this.$('.datetimepicker').datetimepicker({
    defaultDate: new Date(), // show the current date and time in the input
    focusOnShow: false, // prevent the keyboard from opening when you open the picker on mobile devices
  }).on('dp.change', function(e){
    Session.set("selected", e.date.format());
  });
});

Use ‘format’ to set date and not time

The ‘format’ option is very powerful, allowing you to change not only how time and date are displayed but also whether time and date can be selected. See the moment documentation for a list of all valid formats.

Note that the same format should be used for saving the selected date / time to Session.

For example, to show date only in the form “Jul/14/2015” use this code in your datetimepicker.js:

Template.say_when.onRendered(function() {
  this.$('.datetimepicker').datetimepicker({
    defaultDate: new Date(), // show the current date and time in the input
    focusOnShow: false, // prevent the keyboard from opening when you open the picker on mobile devices
    format: 'MMM/D/YYYY' // only show date picker
  }).on('dp.change', function(e){
    Session.set("selected", e.date.format('MMM/D/YYYY')); // only save date
  });
});

Set time only and not date

To use Datetimepicker to pick time only:

  • Use the ‘format’ option to restrict the picker to time only.
  • Use format() to only save time to Session.
  • Change the icon from calendar to clock.

Revised code for datetimepicker.js:

if (Meteor.isClient) {
  Template.say_when.onRendered(function() {
    this.$('.datetimepicker').datetimepicker({
    defaultDate: new Date(), // show the current date and time in the input
    focusOnShow: false, // prevent the keyboard from opening when you open the picker on mobile devices
    format: 'HH:mm a' // only show time picker, using 12-hour clock
   }).on('dp.change', function(e){
     Session.set("selected", e.date.format('HH:mm a')); // only save time, not date
   });
  });
  Template.say_when.helpers({
    show_date: function(){
    return Session.get("selected");
  }
 });
}

Revised code for datetimepicker.html:

<head>
 <title>datetimepicker</title>
</head>
<body>
 <h1>Bootstrap3 Datetimepicker in Meteor</h1>
 {{> say_when}}
</body>
<template name="say_when">
 <div class="input-group datetimepicker">
 <input class="set-due-date form-control" type="text"/>
 <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
 </div>

 <p>{{show_date}}</p>
</template>

Note on icons

The author says to use the code below to include the Datetimepicker. However I found that this didn’t show any icon on the element you need to click to open the calendar.

<div class="input-group datetimepicker">
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    <input class="set-due-date form-control" type="text"/>
  </div>

The Bootstrap documentation led me to use this code instead:

<div class="input-group datetimepicker">
  <input class="set-due-date form-control" type="text"/>
  <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
 </div>

The span “input-group-addon” has been moved to after the input, and the tag inside has the class “glyphicon glyphicon-calendar”.

With this code, I see the calendar icon.