Option to show day of the week when selecting date

Ask the Community Customization
1

I would feel more comfortable with the date selection in the form builder if there was on option to display the day of the week when they select an option. Saturday and Sunday are both “S” (which is fine) but I run weekend events and people get Saturday and Sunday mixed up all the time. So I would love if after they selected a date, it would first show something like “Saturday 1/10/2025” just so I know they got the right day…

1 Like
4

Hi there, @Jonathan_Sywulka :wave:

It’s impossible to display the day of the week in the field after selecting the date. However, you can display the days of the week in 3 letters to avoid any confusion:

image
image808×772 56.2 KB

For this, please add this code to the Custom JS field on the Settings tab of your widget’s settings:

function observeChanges(selector, callback) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(({ addedNodes }) => {
      addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          if (node.matches(selector) || node.querySelector(selector)) {
            callback(node.matches(selector) ? node : node.querySelector(selector));
          }
        }
      });
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
}

function updateWeekdaysText() {
  const weekdays = document.querySelectorAll('.react-calendar__month-view__weekdays__weekday abbr');
  weekdays.forEach((abbr) => {
    const title = abbr.getAttribute('title');
    if (title) {
      abbr.textContent = title.slice(0, 3);
    }
  });
}

observeChanges('.react-calendar__month-view__weekdays__weekday', () => {
  updateWeekdaysText();
});

document.addEventListener('DOMContentLoaded', () => {
  updateWeekdaysText();
});

Please test it out and let me know if it covers your use case :slightly_smiling_face:

1 Like
5

Thanks I’ll try it! Appreciate it!

1 Like
6

Thanks, it works! Very happy with this solution! Accidentally put it in CSS first, but yes in JS it works great.

FYI it shows once I installed it on my website but not in the preview (as it says would happen)

2 Likes
7

Amazing, you’re always welcome :wink:

In the meantime, I’d like to remind you about our CSS Codes category, where you can find custom solutions for different apps (including Forms). Feel free to check it out - CSS Codes - Elfsight Community