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

Building openmw on Debian Jessie

How to make a clickable label in Gtk2/ruby