Support

Account

Home Forums General Issues Datepicker to text field

Solved

Datepicker to text field

  • I want to have a text field but with a date picker. Or a date field with the possibility to write free text if I don’t want a date right now. It’s for a job board and sometimes we have a starting date for the position but sometime we just want to write “As soon as possible” or “Later this year”.

    Any idéas? 🙂

  • I’ve usually done this with a date picker field that isn’t required then an alternative free text field. On the front end, I’ve then had it checking for whatever should be the priority first then falling back to the other field type. Then in the backend on the prioritized field, I usually note in the instructions that if the field is populated, it will take priority over the other.

    So maybe you have a text field that is called something like Starting Date and then a date picker field called Exact Start Date and you note that if the exact start date is populated, it will take priority over the starting date text field (in case someone populates both and you only want one)

    Something like:

    $exactDate = get_field('exact_start_date');
    if ( $exactDate ) {
      echo $exactDate;
    } else {
      // the text field
      the_field('starting_date');
    }
  • What @wpfieldwork says is a good start. From a user UI perspective I would probably have a radio field to select entering an exact date or “other” value and then have the date picker and text fields be conditional on which is chosen and mark them as required. Only the field shown would be required. Also I’d probably put all of these fields inside a group field to make the UI more understandable.

  • Thanks for the inputs, I did something like what John purposed at first but then I did solve this myself with standard jQuery. I simply added a class to the field, “datepick” and then loaded a jQuery datepicker with this code in the wordpress admin.

    jQuery(document).ready(function(){
        jQuery( ".datumpick .acf-input input[type=text]" ).datepicker();
    });

    Its not the ACF datepicker but it is just like it and works just as I want. I can add a date with the datepicker or I can write any word or sentence.

    Hope it may help someone in the future as well.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.