Flatpickr to choose date in text form | XM Community
Skip to main content
Solved

Flatpickr to choose date in text form

  • December 4, 2020
  • 3 replies
  • 109 views
W

Hello,
I am trying to use Flatpickr to choose a date in one input field on a text form question. I have two inputs on the form, one for cell phone and another for Last Date on Campus. I only want the date picker to show up on the date question but it is showing up on both with the code below. Is there a way to only apply the date picker to a single input on a question form?
jQuery("#"+this.questionId+" .InputText").flatpickr({enableTime: false, altInput: true, altFormat: "m/d/yy", dateFormat: "m/d/yy", minDate:"2020-01", maxDate: new Date().fp_incr(0)});

Thank you for you help.

Best answer by TomG

Use .eq(0) for the first field or .eq(1) for the second field. For example:
jQuery("#"+this.questionId+" .InputText").eq(1).flatpickr({
enableTime: false, altInput: true,
altFormat: "m/d/yy", dateFormat: "m/d/yy",
minDate:"2020-01", maxDate: new Date().fp_incr(0)
});

3 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • Answer
  • December 4, 2020

Use .eq(0) for the first field or .eq(1) for the second field. For example:
jQuery("#"+this.questionId+" .InputText").eq(1).flatpickr({
enableTime: false, altInput: true,
altFormat: "m/d/yy", dateFormat: "m/d/yy",
minDate:"2020-01", maxDate: new Date().fp_incr(0)
});

W
  • WIlliamNeal
  • Author
  • December 4, 2020

Thank you Tom, that did the trick!

P

https://www.qualtrics.com/community/discussion/comment/32303#Comment_32303Hi TomG in the form-field question, if I have to pass different jQuery functions to multiple fields, how do I do that? Currently, I am only able to implement it either in 1 field (using your method) or in all of them.
I tried using this code in my 5-field question, but it just did not work for more than 1 field.
jQuery("#"+this.questionId+" .InputText").eq(0).flatpickr({
altInput: true, altFormat: "M/d/yy", dateFormat: "m/d/yy"});
jQuery("#"+this.questionId+" .InputText").eq(1).flatpickr({
altInput: true, altFormat: "M/d/yy", dateFormat: "m/d/yy"});
jQuery("#"+this.questionId+" .InputText").eq(2).flatpickr({
altInput: true, altFormat: "M/d/yy", dateFormat: "m/d/yy"});

Terms & ConditionsAccessibility statement