2

We have a need for a date input. I want to use jquery UI date picker, and I'm building a third_party plugin for freeform to use to create dates, with options for start and end dates selectable by the end user. These I'll pass to the front end no prob.

It's getting a little convoluted and It dawned on me that there might be an existing option out there? I can't be the first person ever to want to use dates in freeform... can I?

i'll carry on development, but if there are any pointers out there, I'll listen.

If I hear nothing I'll keep on developing and share my plugin later...

Cheers..

3
  • Have you considered just using a text field in Freeform, which will store the formatted date values submitted by your front-end date picker fields? – Derek Hogue Aug 14 '13 at 20:13
  • I did.. but that's no fun :) I want to use query date picker (or something similar). I want to give the admin options to say 'ignore weekends' or 'exclude public holidays' making those options not select-able to the end user. Naturally I'll have to do the same validation on the back end, but I think it'll be a good addition to the module. I'll publish wen done.. – Beertastic Aug 15 '13 at 8:34
  • 1
    Did you ever make that date-picker for Free Form? I was going to use one. :D – user2542080 Dec 9 '14 at 4:23
3

I might be missing the goal here (you mentioned a plugin so this might be too simple), but you can very easily add a jQuery UI Datepicker widget to any custom form field in Freeform Pro. Just create a custom text field in the Freeform Pro control panel, lets call it Start Date:

Field Type: text

Field Label: Start Date

Auto-generated Field Name: start_date

Fully generated freeform field id: freeform_start_date

Then in your form template all you need to add is the following jQuery code (assuming you have already loaded jQuery and jQuery UI JS and CSS):

<script type="text/javascript">
    $('#freeform_start_date').datepicker();
</script>

You can add all the jQuery UI bells and whistles wherever you instantiate it.

Then the relevant part of my Freeform template becomes (here I have two Datepicker widgets):

{exp:freeform:composer form_name="myform" return="success"}
<script type="text/javascript">
    // Make text fields jQuery UI Datepicker Widgets
    // Add the ability to change Month and Year with built-in jQuery UI dropdowns
    $('#freeform_start_date, #freeform_end_date').datepicker({
        changeMonth: true,
        changeYear: true
    });
</script>

I hope that helps you and future SO viewers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.