Calendar question - best approach?

Question

I guess there is a few options available to implement this type of question.

Whilst I can throw a handful of numeric questions together or a free format question of some sort, the most professional approach is to insert an actual calendar question.

Do we have a neat solution that will work in Lighthouse for all devices?

Thanks.

Answer 1

I would recommend using jQuery UI's datepicker tool.  It looks great and has support for a lot of customization options (min and max dates, date formatting, etc.).  You can see a demo and find the full documentation here: https://jqueryui.com/datepicker/

As for storing the data, I would recommend using a free format question.  There's no one right answer to what variables you ought to use, though - it just boils down to what you need done with the data.  I explored three options here: https://www.sawtoothsoftware.com/forum/11744/date-picker-in-free-format-question

I can help write the datepicker code for you if you can offer specifics about what functionalities you need it to have and how you want the data saved.

Comments

Thanks Zachary. Some of my requirements are not available right now. I can only guess at this stage. I'm waiting on client approval.

I would prefer to see the date captured as dd/mm/yyyy in the text box. Currently it displays as mm/dd/yyyy.

As far as data being saved goes, I'm looking at two possibilities right now ...

1/ 3 variables - "dd" in one field / "mm" in one field / "yyyy" in one field
2/ 1 variable - date stored as a string "dd/mm/yyyy".

I think this is a good starting point. If any details come to  hand which change my current specifications, I'll certainly post them on this forum entry.

Regards.

---

One additional line to the datepicker constructor will fix the date format for you.  The linked forum post has the first of your data saving possibilities covered.  As for the second one, you can just change the "MM d, yy" to "dd/mm/yy."  For example:

<input type="text" id="datePicker"/>

<script>
$('#datePicker').datepicker({
    dateFormat: 'dd/mm/yy',
    onClose: function() {
        var date = $('#datePicker').datepicker('getDate');
        $('#FreeFormatQ_ReadableString').val($.datepicker.formatDate('dd/mm/yy', date));
    }
});
</script>

Note that this will print "02/01" for January 2.  If you want "2/1" instead, you should use "d" and "m" in place of "dd" and "mm."