Embedding flatpickr into the survey | XM Community
Skip to main content
Question

Embedding flatpickr into the survey

  • March 12, 2020
  • 6 replies
  • 2162 views
L
hi everyone, I am trying to build a date range picker in the survey, to allow participant to select the date range of travelling abroad. I read some posts about flatpickr and it seems to be an option to do so. However, I have no background of JavaScript. Could anyone advise how should it be done to embed the date range picker? Thanks!

6 replies

rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • rondev
  • Level 6 ●●●●●●
  • March 12, 2020
Put the below code in the look & feel -> General -> header -> source view(<>) <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> Use the below code in the text entry question jQuery("#"+this.questionId+" .InputText").flatpickr({ dateFormat: "Y-m-d H:i", minDate: new Date() });
Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
R
JesperAndersen
K
L
  • Lysander
  • Author
  • March 13, 2020
> @rondev said: > Put the below code in the look & feel -> General -> header -> source view(<>) > > <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> > <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> > > Use the below code in the text entry question > > jQuery("#"+this.questionId+" .InputText").flatpickr({ > dateFormat: "Y-m-d H:i", > minDate: new Date() > }); > > I tried to insert the code into the text entry question into "Add Java Script" window. And the following message popped up. "Invalid JavaScript! You cannot save until you fix all errors: Invalid regular expression." How should it be done actually? Would appreciate more guidelines on this! Thanks!
rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • rondev
  • Level 6 ●●●●●●
  • March 13, 2020

Clear the JS and paste it inside onReady function of text entry question JS

Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
R
Level 4 ●●●●
Forum|alt.badge.img+11
  • Rod_Pestell
  • Level 4 ●●●●
  • May 21, 2020

rondev Hi rondev, thanks for the help above regarding the flatpickr code. I came across flatpickr when trying to get a month only view as it had been announced that flatpickr now had that functionality through some sort of plugin attribute (https://flatpickr.js.org/plugins/) (see pic below for the result)

image.pngI added in the altered code with the plugin part (see https://flatpickr.js.org/plugins/ )
uatrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery("#"+this.questionId+" .InputText").flatpickr({
//dateFormat: "Y-m-d H:i",
inline: true, 
    //minDate: new Date(), 
static: true,
   altInput: true,
plugins: [
    new monthSelectPlugin({
     shorthand: true, //defaults to false
     dateFormat: "m.y", //defaults to "F Y"
    altFormat: "F Y", //defaults to "F Y"
    theme: "dark" // defaults to "light"
  })
]
  });
});
and then from a thread (https://github.com/flatpickr/flatpickr/issues/269) I found out that I needed to change the href and script in the look and feel section to include the additional lines:





I'm not sure if you need all 4 lines but it works as it is.
image.pngI piped the previous question answer over and it gives (I changed the dateFormat to d/m/y to get this:
image.pngI guess there are many other alternatives for Month Views but due to my minimal knowledge of JS script, it's often difficult to work out how to map it and get it working. If you have any JS tips or guidance for the future or know of a really good JS script course (for Qualtrics) that would be great.
Thanks
Rod Pestell

rondev
Kirrily_Rourke

I would like to enter a field to record the current date and time(arrival time) into a survey. Plus I would like a field to give the current date but to edit the time to later in the day (estimating departure time). I don't have any idea about coding, but am excellent at cutting and pasting. Can anyone help? Thanks

R
Level 4 ●●●●
Forum|alt.badge.img+11
  • Rod_Pestell
  • Level 4 ●●●●
  • February 16, 2022

Kirrily_Rourke Although a little late replying (sorry!) I'd do two separate flatpickr fields and then combine the results together via an embedded field in the survey flow. If you want the system to understand it as a true timestamp, I presume you need to follow the proper UTC format which has a T in the middle and a Z at then end.
Hope that helps
Rod Pestell

Terms & ConditionsAccessibility statement