Flatpickr in Side-by-side Date and Time in different columns | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Flatpickr in Side-by-side Date and Time in different columns

  • Jan 23, 2024 7:49 PM UTC
  • 1 reply
  • 189 views
nobrien
Level 2 ●●
Forum|alt.badge.img+6

Hi,

I have a side-by-side question, and TPTB asked that day and time be separated. Our users will most likely not notice the time option in the pop-up with the calendar. I’m assuming this.questionId + " .InputText" needs to be updated. I’ve tried some things found in other posts, but nothing is working. Is this possible? What should the code be? Thank you so much in advance.

Cheers,

Noreen

 

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#"+this.questionId + " .InputText").flatpickr({
        altInput: true,
        altFormat: "D, F j, Y",  // Three-letter day abbreviation, full month name, day of the month, and year
        dateFormat: "Y-m-d",
        minDate: new Date().fp_incr(3),
        maxDate: new Date().fp_incr(63)
    });
});
Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#" + this.questionId + " .InputText").flatpickr({
        enableTime: true,
        noCalendar: true,
        dateFormat: "h:i K"  // 12-hour format with AM/PM
    });
});

 

 

Best answer by TomG

Try this:

Qualtrics.SurveyEngine.addOnload(function() {
	var q = jQuery(this.questionContainer);
    q.find(".SBS1 .InputText").flatpickr({
        altInput: true,
        altFormat: "D, F j, Y",  // Three-letter day abbreviation, full month name, day of the month, and year
        dateFormat: "Y-m-d",
        minDate: new Date().fp_incr(3),
        maxDate: new Date().fp_incr(63)
    });
	q.find(".SBS3 .InputText").flatpickr({
        enableTime: true,
        noCalendar: true,
        dateFormat: "h:i K"  // 12-hour format with AM/PM
    });
});

 

View original

1 reply

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • Answer
  • Jan 23, 2024 8:51 PM UTC

Try this:

Qualtrics.SurveyEngine.addOnload(function() {
	var q = jQuery(this.questionContainer);
    q.find(".SBS1 .InputText").flatpickr({
        altInput: true,
        altFormat: "D, F j, Y",  // Three-letter day abbreviation, full month name, day of the month, and year
        dateFormat: "Y-m-d",
        minDate: new Date().fp_incr(3),
        maxDate: new Date().fp_incr(63)
    });
	q.find(".SBS3 .InputText").flatpickr({
        enableTime: true,
        noCalendar: true,
        dateFormat: "h:i K"  // 12-hour format with AM/PM
    });
});

 

    Terms & ConditionsAccessibility statement