calendar picker with only month and year | XM Community
Solved

calendar picker with only month and year

  • 25 April 2024
  • 2 replies
  • 37 views

Badge +1

hi all, 

I want to provide a calendar picker for month and year only. 

I tried with the code below:

 

 

jQuery("#"+this.questionId+" .InputText").flatpickr({


    dateFormat: "m/Y"});
 

The outcome did give me just month and year, but the calendar that pops out has day. 

 

how to display only the month and year in the calendar picker?

 

icon

Best answer by Tom_1842 25 April 2024, 15:28

View original

2 replies

Userlevel 7
Badge +27

Since you are using Flatpickr, you can use the Monthselect plugin. To give it a try, first add the below to the survey’s header:

<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/index.js"></script>

Then, add the below to the JavaScript of the Text Entry question in the OnReady section:

jQuery("#"+this.questionId+" .InputText").flatpickr({
disableMobile: "true",
plugins: [
new monthSelectPlugin({
shorthand: true,
dateFormat: "m/Y",
altFormat: "F Y",
theme: "material_blue"
})
]
});

For Mobile devices, to avoid using the phone's built-in calendar which would include days, disableMobile: true can be added to flatpickr, like in the above.

Badge +1

thanks @Tom_1842 

Leave a Reply