Skip to main content

Using a JQuery datepicker in meteorjs

Today's work on mrt-manager was to add a JQuery datepicker widget to the news addition modal dialog.
A JQuery datepicker in a modal

Include JQueryUI

In case you don't yet use JQueryUI in you meteorjs application you must add a new package :
meteor add mizzao:jquery-ui
Please read the package documentation for potential incompatibilities between jQuery UI
and Bootstrap 2.

Template work

Put your datepicker in a new template (the id field must be unique):
<template name="datepicker">
  <input id="datepicker"  name="date">
</template>
So you just have to use <tt>{{> datepicker}}<tt> in the parent template.

Javascript helper

In the javascript file, you must add a code that loads th datepicker UI at rendering. Please note the datepicker here are related to the HTML one. If you change the HTML input id, or if you have multiple datepicker in one HTML file, you must change them accordingly.
Template.datepicker.rendered=function(){
  this.$('#datepicker').datepicker();
};

Additionally, you can set the today's date as default with this line :
this.$('#datepicker').datepicker('setDate', new Date());

Comments

Popular posts from this blog

How to make a map of variant in C++

This code is used by RainbruRPG to store any scalar types in a single class instance. It's already in use since revision 254 to save game states values when switching fullscreen or changing screen resolution.
The map class It's basically a map of boost::variant using std::string as map key. I decided to use function template setter and getter to have a standardized exception-based error handling, but you could have multiple parameter-based specialized getter/setter (void set(bool), void set(int)...).