How to Add the jQuery-UI Datepicker to Web Forms

Jun 19, 2014 5:11 pm

The jQuery-UI Datepicker is tied to a standard form input field. Once activated you can quickly choose a date from an interactive calendar that will automatically add to the input's value. To set this up you can do so by following these steps:


1. Make sure you add the jQuery widget with Freedom Libraries:

  • Green > Layouts > Widgets > Add a new Widget > add jQuery Include > Choose "jQuery 1.7 Core + jQuery UI + Freedom Libraries


2. Make sure the widget you created in step 1 is in the <head> of your page layout:

  • Green > Layouts > edit the layout that contains your <head> information </head> and place your widget:

For Example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
    <title>[[Page_Title]]</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />

    [[widget.jquery_include]]

</head>

<body>
  [[Content]]
</body>

</html>


3. Download the jQuery Library Themes --> http://jqueryui.com/resources/download/jquery-ui-themes-1.10.4.zip

Note: For this Example we are going to use the Theme "Smoothness" (Located in the .zip file -> jquery-ui-themes-1.10.4 > themes > smoothness > images).


4. Upload your theme's image files to the graphics directory. For Example:

  • Green > File Manager > Create a New Directory "datepicker" > Drag and Drop your Theme file's images in this directory.


5. Add the jquery-ui.css file > Green > Stylesheets > Manage Stylesheets > Add a New Stylesheet > name it jquery-ui.css > Open the .css file from the theme folder in the .zip file you downloaded in step (3) and copy/paste the CSS in the stylesheet you just created.

Note: The stylesheet can be found in the .zip file -> jquery-ui-themes-1.10.4 > themes > smoothness > jquery-ui.css


6. Link the stylesheet in your <head> of your Page Layout For Example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
    <title>[[Page_Title]]</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" href="x_old_stylesheet.css" type="text/css" />
    <!--jQuery Datepicker-->
    <link rel="stylesheet" href="jquery-ui.css" type="text/css" />
    [[widget.jquery_include]]
   
</head>

<body>
  [[Content]]
</body>

</html>

Note: You will need to update the path to the images for the datepicker (lines 927-955) in the jquery-ui.css file to point to the location where you placed the images in step (4). For Example:


.ui-widget-content .ui-icon {
    background-image: url("graphcis/datepicker/ui-icons_222222_256x240.png");
}

7. Add the necessary jQuery Function to call the Datepicker inside of the <head></head> of your page layout BELOW the [[widget.jquery_include]] -


<script type="text/javascript">
    $(document).ready(function() {
        $('.datepicker').datepicker();
    });
</script>

Final Code Example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
    <title>[[Page_Title]]</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" href="x_old_stylesheet.css" type="text/css" />
    <!--jQuery Datepicker-->
    <link rel="stylesheet" href="jquery-ui.css" type="text/css" />
    [[widget.jquery_include]]
    <script type="text/javascript">
        $(document).ready(function() {
            $('.datepicker').datepicker();
        });
    </script>
</head>

<body>
  [[Content]]
</body>

</html>


8. Now that you have all of the necessary files and setup for the datepicker it's extremely easy to add it to a textbox field in the Forms Module:

  • Blue > Forms > Web Forms > Add or Edit a Form > Add a New Field > Field Type: Custom > Unique ID: date > Input Method > textbox > Label: Date
  • In the "Extra Attributes" field you will want to enter --> class="datepicker"

Note: The class, "datepicker" is the class used to trigger the datepicker configured in step (7)

Congrats!!! You have added the jQuery-UI Datepicker to your web form!

If you would like more information & documentation about the jQuery-UI Datepicker below is a link to all of the documentation:

http://jqueryui.com/datepicker/

Jun 20, 2014 9:09 am

Thanks Blake!

This makes the process crystal clear. :) I can't wait to see more tips and tutorials like this!

Amy
amy@pressingissues.com