Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Date picker in free format question

How do I set up the variable information in a free format question to capture date from a date picker, such as the one from JQuery (see below).


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="datepicker"></div>
 
<script>
$( "#datepicker" ).datepicker();
</script>
 
</body>
</html>
asked Oct 19, 2016 by anonymous

1 Answer

0 votes
The jQueryUI's DatePicker tool calls the function "onClose" when the UI is closed.  That would be a good time to set the free format variables.  The next question would be what information to put in what free format variables.  The best answer to this question depends on what you want to do with the data, but here are a few options:

#1.  A single variable storing Unix time.  This would be a great choice if you want to do comparisons later on (e.g., verify that Q2's date is later than Q1's date).  The downside of this option is that it is not very human readable.

#2.  A single variable storing a readable string.  This is great if you want a nice, printable date in the database.  This route would make doing mathematical / logical operations on the data more difficult down the road.  You can look up specific date formatting settings in the DatePicker documentation.

#3.  Three variables, storing day, month, and year.  Fairly readable and not too tricky to do math on.

Here's an example of the code I put in my free format question to record the data in all three of the above options:

<input type="text" id="datePicker" placeholder="dd/mm/yyyy">
<input name="FreeFormatQ_Unix" id="FreeFormatQ_Unix" type="hidden" value="">
<input name="FreeFormatQ_Year" id="FreeFormatQ_Year" type="hidden" value="">
<input name="FreeFormatQ_Month" id="FreeFormatQ_Month" type="hidden" value="">
<input name="FreeFormatQ_Day" id="FreeFormatQ_Day" type="hidden" value="">
<input name="FreeFormatQ_ReadableString" id="FreeFormatQ_ReadableString" type="hidden" value="">

<script>
$('#datePicker').datepicker({
    onClose: function(){
        var date = $('#datePicker').datepicker('getDate');
        
        // Unix
        $('#FreeFormatQ_Unix').val(date.getTime());
        
        // Y, M, D
        $('#FreeFormatQ_Year').val(date.getFullYear());
        $('#FreeFormatQ_Month').val(date.getMonth() + 1); // months are zero-based
        $('#FreeFormatQ_Day').val(date.getDate());
        
        // Readable string
        $('#FreeFormatQ_ReadableString').val($.datepicker.formatDate('MM d, yy', date));
    }
});
</script>


Is one of those three acceptable to you?  I can help adjust the code if you provide me with specifications about how you want the data saved.
answered Oct 19, 2016 by Zachary Platinum Sawtooth Software, Inc. (63,775 points)
P.S.: jQuery and jQueryUI are built into recent versions of SSI Web / Lighthouse, so you may not need to manually load those JS and CSS files.
I have decided to go with the three variables of storing day, month, and year and the code you provided worked perfectly. Thanks so much.
Need help implementing a date picker.
...