It appears Qualtrics has included it’s own Calendar Question Type. Yay!However, it looks like it also includes a time-interval formatting feature where people HAVE to pick a time. Currently there is not an option to exclude this.I contacted Support and they said maybe there is someone in the community that can recommend code to get rid of it.Would love some help. Thank you!

I was just working on the same thing! I have an implementation that I think is working well. There were 3 things I was trying to overcome:1) Removal of the Time pane from the calendar2) Closing the calendar when a day is selected3) Removal of the timestamp from the text inputFor 1, Add the below CSS to the Style section of the Look & Feel. It hides the Time pane and then stretches out the weeks/days to fill the space:.react-datepicker__time-container { display: none;}.react-datepicker__month-container, .react-datepicker__week { width: 100% !important;}.calendar .question-content .calendar-outer .react-datepicker-popper .react-datepicker__day {width: clamp(2.6rem, var(--answer-text-size, 1rem) * 2, 3.5rem)}@media (max-width: 480px) {.calendar .question-content .calendar-outer .react-datepicker-popper .react-datepicker__day {width: clamp(2.4rem, var(--answer-text-size, 1rem) * 2, 2.4rem) !important;}For 2, There is JavaScript that will automatically select the 12:00AM time when a day is selected, closing the calendar.For 3, There is JavaScript that will prevent the 12:00AM from showing up in the text input.Try adding the below to the question's JavaScript:Qualtrics.SurveyEngine.addOnReady(function(){/*Place your JavaScript here to run when the page is fully displayed*/// Function to click a specific time in the time picker when a day is selectedfunction clickSpecificTime(timeText = '12:00 AM') { const timeItems = document.querySelectorAll('.react-datepicker__time-list-item'); for (const item of timeItems) { if (item.textContent.trim() === timeText) { item.click(); // Select the desired time break; } }}// Attach click listeners to each day in the calendarfunction attachDayClickListeners() { const dayElements = document.querySelectorAll('.react-datepicker__day'); dayElements.forEach(day => { if (!day.dataset.listenerAttached) { // Add a click listener to select the time after a day is clicked day.addEventListener('click', () => { setTimeout(() => { clickSpecificTime('12:00 AM'); }, 50); // Delay to ensure the day actually gets selected }); // Mark this day element so listener does not reattach day.dataset.listenerAttached = 'true'; } });}// Override the input's value setter to prevent "12:00 AM" from being setfunction overrideInputValueSetter() { const inputs = document.querySelectorAll('input.text-input'); inputs.forEach(input => { // Get the original value property descriptor const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value'); // Only override if it's configurable and hasn't been overridden already if (descriptor && descriptor.configurable && !input.dataset.overrideApplied) { Object.defineProperty(input, 'value', { get() { return descriptor.get.call(this); // Use the original getter }, set(newValue) { // Strip out "12:00 AM" before setting the value const cleanValue = newValue.replace(/\s*12:00\s?[AP]M/i, ''); descriptor.set.call(this, cleanValue); }, configurable: true, enumerable: true }); // Mark this input so does not override again input.dataset.overrideApplied = 'true';// Remove ability to type in input and prevents keyboard on mobileinput.setAttribute('readonly', true); // Remove timestamp on page load const currentValue = input.value; const cleanedValue = currentValue.replace(/\s*12:00\s?[AP]M/i, ''); input.value = cleanedValue; } });}// Observe the DOM for changes to re-attach listeners and override setters as neededlet globalObserver = new MutationObserver(() => { attachDayClickListeners(); // Re-attach day click listeners overrideInputValueSetter(); // Re-apply input value overrides});globalObserver.observe(document.body, { childList: true, subtree: true});// Initial setup on page loadattachDayClickListeners();overrideInputValueSetter();// Remove the observers on page submitQualtrics.SurveyEngine.addOnPageSubmit(function (type) { if (globalObserver) { globalObserver.disconnect(); globalObserver = null; } });});I also added a line that turns the input into read-only as my phone's keyboard was covering the calendar when trying to select a date. Feel free to delete if you want to keep the ability to type. Hope this helps! You might also check out Flatpickr. Here’s a post on that.

@ZonksThe question text bolding looks to be default behavior for the Calendar question. I was having trouble getting any CSS override rules to stick, so here is a JavaScript option, though there may be a brief flash of the bolding before it gets removed. Try adding the below to the Onload section of the question's JavaScript:Qualtrics.SurveyEngine.addOnload(function(){/*Place your JavaScript here to run when the page loads*/var qid = this.questionId;setTimeout(function () { var questionDisplay = document.getElementById("question-display-"+qid); questionDisplay.style.fontWeight = "normal";}, 5);});For the exported data format, I don't think there is currently a way to change how Qualtrics actually records the date/time selection, but the Calendar question does have piping options that should work well. One of them isjust the date without the timestamp.Try adding the below Embedded Data field(s) to the bottom of your Survey Flow, updating with the QID of your Calendar question.

New Calendar Question Type - Removing Time Interval?

New Calendar Question Type - Removing Time Interval? | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded