Jump to the millipedia homepage

Adding a date picker to CMSMS

This is just a dead simple way of showing how to get a nice jQueryUI datepicker into the FormBuilder module in CMSMS.

Like this. Click on the input field to pick a date.

Oh, at the moment it's showing the calendar in Danish just as a quick test.

You'll need to add a class of 'datepicker' to any text inputs you want bring up a calendar.

Then add the following to the 'Page specific metadata' box on the page that has the form.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" />

<script type="text/javascript">
$(document).ready(function() {
$(function() {$('div.datepicker input').datepicker({dateFormat: 'd M yy'});});


Remember to use those smarty 'literal' tags.

This pulls the jQuery files from the Google CDN so there's no need to upload any javascript files to your site. Easy for you and hey, probably a good thing to do for several reasons.

You can choose a different theme by pulling in a different css file or you can use your own.

Jul 12, 2010
in : CMSMS ,