Bootstrap plugin with RequireJS and #TypeScript

Let’s keep on learning #TypeScript and the benefits of RequireJS. In a previous entrance, you could read an example of How to use a jQuery plugin in a project, but now it is time to do the same, but using a Bootstrap plugin, with RequireJS and TypeScript.

I have chosen this DatePicker, a veru useful resource I use to work with in my projects: once you click on an input you’ll get a method for selecting a date. Very useful!!

The chosen plugin is not random, because I’ve tried several until using one I really like! You have it available here: http://vitalets.github.io/bootstrap-datepicker/. Let’s start!

Using the RequireJs template

For executing his basic exercise, I will be using the template explained here, and includes RequireJS, jQuery, Bootstrap (dependant on jQuery). I have removed all related to HandleBars, because I don’t need it for this exercise.

In the HTML, let’s add a header and an input for a date:

<div class="container jumbotron">

<h2 >
RequireJS, Bootstrap, Bootstrap plugin with locals
</h2>

</div>


<div id="main" class="container">
Fecha:


<div class="well" id="datetimepicker">

<div class="input-append date" id="mi_fecha" data-date="2012-02-13" data-date-format="yyyy-mm-dd">
<input class="span2" size="16" type="text" value="2012-02-13">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>

</div>

</div>

Using a plugin is a 3 step process

In order to use a Bootstrap plugin with RequireJS, you need to follow this 3 steps. First, let’s work with interfaces.ts because I need to update jQuery object with a new method.

interface JQuery {
datepicker: any
}

Second step is to modify the consiguration file for RequireJS, config.ts, and I need to include the path to the plugin, and also the locals.

/// <reference path="./typings/require.d.ts" />

/**
* Application configuration declaration.
*/
require.config({

baseUrl: 'ts/',

paths: {
//main libraries
"jquery": '../js/jquery',
"bootstrap": '../js/bootstrap.min',
"bootstrap-datetime": "../js/bootstrap-datepicker",
"bootstrap-datetime-es": "../js/bootstrap-datepicker.es"
//shortcut paths
},

shim: {
"jquery": {
exports: '$'
},
"bootstrap": {
deps: ['jquery']
},
"bootstrap-datetime": {
deps: ["jquery", "bootstrap"],
exports: "$.fn.datepicker"
},
"bootstrap-datetime-es": {
deps: ["bootstrap-datetime"]
}
}
});

require(["app"]);

I wanr you that is very important to specify the correct path to the js file, and in the shim you should set the correct dependencies. If you see the code of the file bootstrap-datepicker.es, you need in add export to this function ( $.fn.datepicker) in the shim of bootstrap-datetime, and also, to set up the right dependencies: jQuery and Bootstrap (this is very important!!!):

;(function($){
$.fn.datepicker.dates['es'] = {
days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"],
daysShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"],
daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"],
months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
today: "Hoy"
};
}(jQuery));

App.ts

The final step is done in the code of app.ts for loading the plugin, inserting a new line within the require function.

/// <reference path="../typings/jquery.d.ts" />
/// <reference path="../typings/require.d.ts" />
/// <reference path="../typings/bootstrap.d.ts" />

/// <reference path="menu.ts" />
/// <amd-dependency path="menu.ts" />

require([
'Menu',
'jquery',
'bootstrap',
'bootstrap-datetime',
"bootstrap-datetime-es"
], (MenuApp, $) => {
'use strict';
$(() => {
var menu = new MenuApp();
});
});

Easy, isn’t it?

Using the plugin in menu.ts

Everything is ready for action, so let’s move to menu.ts, and add this little code:

/// <reference path="../typings/jquery.d.ts" />
/// <reference path="../typings/bootstrap.d.ts" />
/// <reference path="interfaces.ts" />
import $ = require("jquery");
class MenuApp {
private debug: boolean = false;

constructor() {
console.log('Plantilla cargada con exito!');
var datapicker_opciones = {
language: 'es',
autoclose: true
}
$('#mi_fecha').datepicker(datapicker_opciones);
}
}
export = MenuApp;

As en extra for this plugin, it is important that you configure a variable with the values for customization the datapicker, including the language property (language:  es). So, I encourage you to read the plugin documentation!

And here you have the exercise in action:

RequieJS is not as hard as it seems

I hope that after this series fo entrance related to RequireJS, you use it becuase it makes easy to maintain code, and dependencies makes things easy. It is very important to set up the configuration, but if you follow this steps, you can use it as easy as I do.

Happy coding!