Sawtooth Software: The Survey Software of Choice

In SSI Web 8, how do I use the built-in jQuery UI library to select a date from a popup or inline calendar?

The jQuery UI Datepicker Widget is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

Here's an example:

Date:

There are a number of options available for this function, including animations, dates in other months, display button bar, display inline, display month & year menus, display multiple months, format date, icon trigger, localize calendar, populate alternate field, restrict date range, select a date range, and show week of the year.

jQuery UI Documentation

SSI Web Usage

Let's say you creae a Free Format question type that is named date. You will want to use the jQuery UI datepicker function to capture a date and store it in a text variable.

First, you will want to add a variable to store the date. It needs to have a variable type of "text" and you can name it what you want. In this example, we are going to call it, "date_plain".

Second, you will drop in the code below into the Question HTML section of the Free Format question:

<script>
  $(function () {
    $("#datepicker").datepicker();
  });
</script>

<p>Date: <input name="date_plain" id="datepicker" type="text"></p>

The key to storing the date in the survey is to use the name="date_plain" section; without it, the date won't be stored.