Condition Date & Time

Wishlist Form Builder
1

Allow you to define conditions for date and time fields.

  • Example 1: When an end date is equal to the start date, either default the start date to the end date or simply hide the end date field
  • Example 2: When the end date is less than the start date display a message to the user "Set a correct end date.
    Exemple Custom JS Code
    // Get the input elements
    let dateDebut = document.getElementById(‘[date-de-début]’);
    let dateFin = document.getElementById(‘[date-de-fin]’);
    let heureDebut = document.getElementById(‘[heure-de-début]’);
    let heureFin = document.getElementById(‘[heure-de-fin]’);

// Get the item to display messages
let message = document.getElementById(‘message’);

// Define dates functions before using them
function verifierDates() {
if (dateFin.value === dateDebut.value) {
dateFin.style.display = ‘none’;
} else if (new Date(dateFin.value) < new Date(dateDebut.value)) {
message.textContent = ‘Veuillez définir une plage de date valide : Saisir une date de fin Supérieure ou égale à la date de début’;
} else {
dateFin.style.display = ‘’;
message.textContent = ‘’;
}
}

// Define times functions before using them*
function verifierHeures() {
if (heureFin.value < heureDebut.value) {
message.textContent = ‘Veuillez définir une plage horaire valide : Saisir une heure de fin Supérieure ou égale à l'heure de début’;
} else {
message.textContent = ‘’;
}
}
// Check dates and times whenever they change
dateDebut.addEventListener(‘change’, verifierDates);
dateFin.addEventListener(‘change’, verifierDates);
heureDebut.addEventListener(‘change’, verifierHeures);
heureFin.addEventListener(‘change’, verifierHeures);

function verifierDates() {
if (dateFin.value === dateDebut.value) {
dateFin.style.display = ‘none’;
} else if (new Date(dateFin.value) < new Date(dateDebut.value)) {
message.textContent = ‘Veuillez définir une plage de date valide : Saisir une date de fin Supérieure ou égale à la date de début’;
} else {
dateFin.style.display = ‘’;
message.textContent = ‘’;
}
}

function verifierHeures() {
if (heureFin.value < heureDebut.value) {
message.textContent = ‘Veuillez définir une plage horaire valide : Saisir une heure de fin Supérieure ou égale à l'heure de début’;
} else {
message.textContent = ‘’;
}
}

// Now add the event listeners
dateDebut.addEventListener(‘change’, verifierDates);
dateFin.addEventListener(‘change’, verifierDates);
heureDebut.addEventListener(‘change’, verifierHeures);
heureFin.addEventListener(‘change’, verifierHeures);

1 Like
2

Hi there @Equipe_DRIING :wave:

A huge thank you for sharing your workaround with us!

I see that it would be awesome to have more advanced condition options right in the configurator, and we’ll try to work in this direction in the future. I’ll keep you in the loop :slightly_smiling_face:

Once again, thank you so much for adding your idea and welcome to the Community!

1 Like
4

The Elfsight’s own example is a “booking form” with “check-in date” and “check-out date”. Therefore there should be a an option to allow only a date that is higher than the date in another field. Also the phone field should have an optional to make it mandatory to enter a country code, or make the country code selectable by a flag.