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 calendar
2) Closing the calendar when a day is selected
3) Removal of the timestamp from the text input

For 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 selected
function 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 calendar
function 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 set
function 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 mobile
		input.setAttribute('readonly', true);

     // Remove timestamp on page load
      const currentValue = input.value;
      const cleanedValue = currentValue.replace(/\s*12:00\s?sAP]M/i, '');
      input.value = cleanedValue;

    }
  });
}

// Observe the DOM for changes to re-attach listeners and override setters as needed
let 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 load
attachDayClickListeners();
overrideInputValueSetter();

// Remove the observers on page submit
Qualtrics.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.

​@Tom_1842 Thank you so much! I just tested it and it worked perfectly on the computer and a mobile phone.

The only thing on both of those is that my question is bolded and I’m not sure why. When I go to rich content editor, it is not bolded. See screenshots below of the question during the preview and while in survey editing mode.

Additionally, the exported data still shows the time as 7:00 AM. Would there be a way to not record the time at all in the data export?

​@Zonks The 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 is just 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.