Pre-format text entry to date

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 @MattiasM 

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 

@AnnaW,

You can use cleave.js to format the date as it is typed.

@TomG I pasted this into the Javascript under Onload function. However it’s not working. 

Can you help me out with this?

var cleave = new Cleave('.input-element', {
    date: true,
    delimiter: '/',
    datePattern: ['Y', 'm', 'd']
});

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.

@TomG 

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 @TomG I formatted everything like you advised me (thanks!) but it’s still not doing anything… Any other things I can try? 

Thanks in advance!

Anna 

@Tom_1842 it works! Thank you so much!