Have an idea?

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

Need help implementing a date picker.

I copied the code provided by Zachary for the date picker  into a free format question I called "fecha_data." I can test the question, pull the calendar, and pick a date, but no data is saved under "fecha_data." What is missing in the code and setup?

I need to prevent people  from selecting a future date after the date they are taking the survey on. For example, they can select today's date or any date in the past, but not tomorrow. What would be the code for that?

Also, if they pick Labor Day weekend, sept 2, 3, or 4, we need to show a message saying "The date you selected is a holiday weekend. We are interested in a more typical occasion. Please think of the last time you consumed alcohol before Labor Day weekend" and then send them back to a prior question so they start all over before picking the date.
related to an answer for: Date picker in free format question
asked Oct 10, 2017 by rinsights (410 points)
edited Oct 11, 2017 by rinsights

1 Answer

0 votes
The name of your free format variable(s) needs to be consistent with the names used in the HTML and JavaScript.  Sticking with the names "_Unix," "_Year", "_Month", "_Day", and/or "_ReadableString" might be easiest to make sure data is saved.

To restrict the calendar to today and earlier, you can add "maxDate" to the code like this:

$('#datePicker').datepicker({
    maxDate: 'today',
    onClose: function(){
    ...


To skip to a different question when Labor Day is selected, you'll need to add a skip to your free format question that skips when _Month = 9 and _Day = 2, 3, or 4:

fecha_Month = 9 And (fecha_Day = 2 Or fecha_Day = 3 Or fecha_Day = 4)
answered Oct 11, 2017 by Zachary Platinum Sawtooth Software, Inc. (86,400 points)
Thank you Zach. I would like to show an alert , before the skip happens. The message would say: "The date you selected is a holiday weekend. We are interested in a more typical occasion. Please think of the last time you consumed alcohol before Labor Day weekend." What code do I use for that?
How is the message supposed to look?  Is the JavaScript alert fine, or do you have something else in mind?  If the respondent is to read the message, when does the skip trigger?
Once they select the wrong dates (Sept 2, 3, 4) in the datepicker, they should see the message, and then sent back to the prior question.
You'll still need to use the skip described above.  In addition, add this custom JS verification:

if (SSI_GetValue('[% QuestionName() %]_Month') == 9 && SSI_GetValue('[% QuestionName() %]_Day') >= 2 && SSI_GetValue('[% QuestionName() %]_Day') <= 4) {
    alert('The date you selected is a holiday weekend. We are interested in a more typical occasion. Please think of the last time you consumed alcohol before Labor Day weekend.');
}
Where do I put it? I add it after the script for the date picker, but it didn't work. I get a message saying " the function call datePicker_Month' does not exist"

Here is all my code. What's wrong with it?

<input type="text" id="datePicker" placeholder="dd/mm/yyyy">
<input name="datePicker_Unix" id="datePicker_Unix" type="hidden" value="">
<input name="datePicker_Year" id="datePicker_Year" type="hidden" value="">
<input name="datePicker_Month" id="datePicker_Month" type="hidden" value="">
<input name="datePicker_Day" id="datePicker_Day" type="hidden" value="">
<input name="datePicker_ReadableString" id="datePicker_ReadableString" type="hidden" value="">
 
<script>
$('#datePicker').datepicker({
    maxDate: 'today', // Prevents selection of future dates
    onClose: function(){
        var date = $('#datePicker').datepicker('getDate');
         
        // Unix
        $('#datePicker_Unix').val(date.getTime());
         
        // Y, M, D
        $('#datePicker_Year').val(date.getFullYear());
        $('#datePicker_Month').val(date.getMonth() + 1); // months are zero-based
        $('#datePicker_Day').val(date.getDate());
         
        // Readable string
        $('#datePicker_ReadableString').val($.datepicker.formatDate('MM d, yy', date));
    }
});
</script>

<script>
if (SSI_GetValue('[% datePicker_Month()%]') == 9 && SSI_GetValue('[% datePicker_Day() %]') >= 2 && SSI_GetValue('[% datePicker_Day()%]') <= 4) 
{
    alert('The date you selected is a holiday weekend. We are interested in a more typical occasion. Please think of the last time you consumed alcohol before Labor Day weekend.');
}
</script>
I think, it was cutoff. Let me try again
<code>
<input type="text" id="datePicker" placeholder="dd/mm/yyyy">
<input name="datePicker_Unix" id="datePicker_Unix" type="hidden" value="">
<input name="datePicker_Year" id="datePicker_Year" type="hidden" value="">
<input name="datePicker_Month" id="datePicker_Month" type="hidden" value="">
<input name="datePicker_Day" id="datePicker_Day" type="hidden" value="">
<input name="datePicker_ReadableString" id="datePicker_ReadableString" type="hidden" value="">
 
<script>
$('#datePicker').datepicker({
    maxDate: 'today', // Prevents selection of future dates
    onClose: function(){
        var date = $('#datePicker').datepicker('getDate');
         
        // Unix
        $('#datePicker_Unix').val(date.getTime());
         
        // Y, M, D
        $('#datePicker_Year').val(date.getFullYear());
        $('#datePicker_Month').val(date.getMonth() + 1); // months are zero-based
        $('#datePicker_Day').val(date.getDate());
         
        // Readable string
        $('#datePicker_ReadableString').val($.datepicker.formatDate('MM d, yy', date));
    }
});
</script>

<script>
if (SSI_GetValue('[% datePicker_Month()%]') == 9 && SSI_GetValue('[% datePicker_Day() %]') >= 2 && SSI_GetValue('[% datePicker_Day()%]') <= 4)
{
    alert('The date you selected is a holiday weekend. We are interested in a more typical occasion. Please think of the last time you consumed alcohol before Labor Day weekend.');
}
</script>
</code>
It needs to be placed in your free format's custom JavaScript verification field.
I did. I still get the error message  " the function call datePicker_Month' does not exist"
You don't need to make modifications to the provided custom JavaScript verification.  Leave "[% QuestionName() %]" unchanged.
Ok, I did that. Now when I test I see this: https://www.screencast.com/t/JQVQ4Zec
When I select the wrong date, nothing happens.
You don't need "<script>" or "</script>" tags in custom JS verification.
Thanks!!! It works now.
...