I'm asking for my respondents date of birth. Therefore I'm using a text entry question for which I set response requirements - add validation - content type - date format - dd/mm/yyyy. I like to have it this way that the textbox is already formatted this way --/--/---- --> so the participants don't need to type the / / themselves. Is it possible to pre-format the text-entry? Thanks in advance!
Best answer by Tom_1842
View original
+61
Hello and good afternoon from a sunny Sweden!
Not the solution you’re after, but are you aware of the pre-prepared date pickers Qualtrics have?
You can find them under the “Import from Library” button in the survey, then under the “Qualtrics Library” section you choose “Demographics” and then “Calendar and Date Questions”. Then you just insert them and see if they would be ok for your material. (I would probably say that the Matrix table version is best suited to your needs in this case)
All the best
-Mattias
Hello
Thank you for your reply. Yes I’m aware I can use this date-pickers, although they are not that suited for my respondents since it takes a lot more time to go through this calendars compared to just entering their date of birth.
Enjoy your Friday afternoon!
Anna
+27
You can use cleave.js to format the date as it is typed.
Can you help me out with this?
var cleave = new Cleave('.input-element', {
date: true,
delimiter: '/',
datePattern: ['Y', 'm', 'd']
});Can you help me out with this?
var cleave = new Cleave('.input-element', {
date: true,
delimiter: '/',
datePattern: ['Y', 'm', 'd']
});.input-element isn’t a class name in Qualtrics. You could use .InputText if it is the only text input on the page. A better solution would be to find the text input element within the text entry question:
new Cleave(jQuery("#"+this.questionId+" .InputText").get(0), {Also, if you haven’t done it, you need to load the cleave library in the survey header.
Thanks for your reply! I did what you advised and also pasted this into the survey header
<script src="
https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js
"></script><script src="cleave.min.js"></script><script src="cleave-phone.{country}.js"></script>
But nothing changes to the format of the text field.
+27
Thanks for your reply! I did what you advised and also pasted this into the survey header
<script src="
https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js
"></script><script src="cleave.min.js"></script><script src="cleave-phone.{country}.js"></script>
But nothing changes to the format of the text field.
You only need this in your header. Make you you add it in source (<>) mode.
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>
Hi
Thanks in advance!
Anna
+27
Hmm it is working for me. Make sure that cleave is loaded in the survey's header:
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>And then add the below to the OnReady section of the question's JavaScript:
new Cleave(jQuery("#"+this.questionId+" .InputText").get(0), {
date: true,
delimiter: '/',
datePattern: ['Y', 'm', 'd']
});If you are using Simple layout, you will also need to add jQuery to the survey's header:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>And then add the below to the OnReady section of the question's JavaScript:
new Cleave(jQuery("#question-"+this.questionId+" .text-input").get(0), {
date: true,
delimiter: '/',
datePattern: ['Y', 'm', 'd']
});
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.