{"id":1,"date":"2015-07-12T18:43:00","date_gmt":"2015-07-12T17:43:00","guid":{"rendered":"http:\/\/www.gts-ltd.co.uk\/wordpress\/?p=1"},"modified":"2015-12-25T14:39:28","modified_gmt":"2015-12-25T14:39:28","slug":"hello-world","status":"publish","type":"post","link":"https:\/\/www.gts-ltd.co.uk\/wordpress\/2015\/07\/12\/hello-world\/","title":{"rendered":"Using Bootstrap3 Datetimepicker in Meteor"},"content":{"rendered":"

I’ve just started using a platform\u00a0called Meteor<\/a> 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.<\/p>\n

One such is the Bootstrap3 Datetimepicker<\/a>. It has extensive documentation<\/a> but I found it tricky\u00a0to install and use it under Meteor.<\/p>\n

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<\/a>.<\/p>\n

I’m running Meteor version 1.1.0.2 under Linux Mint 17.1 and these instructions work as of 14th July 2015.<\/p>\n

Create a Meteor project<\/h2>\n

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:<\/p>\n

meteor create datetimepicker\r\ncd datetimepicker\r\nmeteor add jquery\r\nmeteor add twbs:bootstrap\r\nmeteor add tsega:bootstrap3-datetimepicker<\/code><\/pre>\n
Basic use of Datetimepicker<\/h2>\n
First, let’s\u00a0include 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.<\/p>\n
Replace the contents of datetimepicker.html with this code:<\/p>\n
<head>\r\n <title>datetimepicker<\/title>\r\n<\/head>\r\n<body>\r\n <h1>Bootstrap3 Datetimepicker in Meteor<\/h1>\r\n{{> say_when}}\r\n<\/body>\r\n<template name=\"say_when\">\r\n <div class=\"input-group datetimepicker\">\r\n <input class=\"set-due-date form-control\" type=\"text\"\/>\r\n <span class=\"input-group-addon\"><i class=\"glyphicon glyphicon-calendar\"><\/i><\/span>\r\n <\/div>\r\n><p>{{show_date}}<\/p>\r\n<\/template><\/pre>\n
And replace the contents of datetimepicker.js with this code:<\/p>\n
if (Meteor.isClient) {\r\n  Template.say_when.onRendered(function() {\r\n    this.$('.datetimepicker').datetimepicker({\r\n    }).on('dp.change', function(e){\r\n      Session.set(\"selected\", e.date.format());\r\n    });\r\n  });\r\n  Template.say_when.helpers({\r\n    show_date: function(){\r\n      return Session.get(\"selected\");\r\n    }\r\n  });\r\n}<\/pre>\n
Set some options<\/h2>\n
You can use Datetimepicker’s options<\/a> to adjust how your Datetimepicker behaves. Use the options shown below to:<\/p>\n