Forms Date field Format

Question
1

Good morning

We created a form on Sparkle, with a Date field, and sending it in GET
our field must be in French format: checkin=24%2F04%2F2024
except sending is done like this: checkin=2024-04-25

How can we get the specific format from our supplier (checkin=24%2F04%2F2024)?

Thanks for your feedback

2

Yo need to give your date field an ID, which you can do in the Arrange Inspector. The option looks like this:

Screenshot 4

In this example, an ID of dateInput has been used.

Now open your site settings and go down to the Developer section. There you will see an option to add code to the head section of your page.

Screenshot
Screenshot1600×946 186 KB

Add the following code:

<script>
function formatDate() {
    // Get the value of the date input field
    var inputDate = document.getElementById("dateInput").value;

    // Format the date (example format: DD-MM-YYYY)
    var formattedDate = inputDate.split("-").reverse().join("-");

    // Set the formatted date back to the input field
    document.getElementById("dateInput").value = formattedDate;
    
    // You can then proceed with submitting the form or processing the data further
    document.getElementById("dateForm").submit();
}
</script>

This should solve the problem of how you receive the date information. Although the format of the date shown on screen will be dependent upon the user’s individual system, the javascript function will ensure that the date sent is in the format you want.

3

Thanks @francbrowne, but unfortunately it doesn’t work.

I have the code in the HTML:

</div>
<form method="GET" action="https://avis.ribiera.fr" class="v37 ps594 s695 z515">
<div class="v37 ps595 s696 c88">
<input type="date" placeholder="dateInput" name="dateInput" class="input4">
</div>

with the script at the beginning of the HTML :

<script>
function formatDate() {
    // Get the value of the date input field
    var inputDate = document.getElementById("dateInput").value;

    // Format the date (example format: DD-MM-YYYY)
    var formattedDate = inputDate.split("-").reverse().join("-");

    // Set the formatted date back to the input field
    document.getElementById("dateInput").value = formattedDate;
    
    // You can then proceed with submitting the form or processing the data further
    document.getElementById("dateForm").submit();
}
</script>

But the return of the Get is always: https://avis.ribiera.fr/index.html?dateInput=2024-04-26

Instead of :

https://avis.ribiera.fr/index.html?dateInput=24%2F04%2F2024

4

I’m sorry about that - the script only ensures that the date field on your form is in your preferred format. This should transfer to your form processing script in the same format. I can only assume (because you are specifying the GET method), that you are using a third party script or form processing service. If that is the case, your issue is likely to be with the script you’re using or the service provider. The server side processing may be converting your date format into the US date format before sending you the results. You should check with the script provider or the service provider to see if there is anything that can be done to have your form responses formatted differently.

Normally, date information is interpreted by the system receiving the data - your email client. The format is usually determined by the locale settings on your system. You’ll see this when you view the date/timestamps on your emails. For example, on my emails, date and time stamps are shown as follows:

Screenshot

This is because my local system is set up to display dates in that format. If your form data is being received with a US date format, it may be that the response email isn’t showing the date information in a date format - it may just be text content that has been derived from the original form field, and it’s got converted somewhere along the line.

5

Good morning
I think I expressed myself badly.
I created a page, with a simple date field: ‘https:// www. ribiera. fr/OLD/test.html’
When you validate the form, it returns to the page: ‘ribiera . fr/OLD/result.html?dateInput=2024-04-27’

And I just want the value of the url to be: `ribiera . fr/OLD/result.html?dateInput=27%2F04%2F2024’

6

Bonjour Laurent :wave:t2:

C’est assez complexe, mais c’est possible. Pour obtenir précisément le format checkin=24%2F04%2F2024, tu peux essayer une autre technique, qui consiste à récupérer la date du champ principal, la formater au format DD/MM/YYYY, puis la transmettre à un autre champ de texte invisible des yeux des visiteurs. C’est ce champ invisible qui sera envoyé avec le formulaire.

Voici la marche à suivre :

  1. Dans ton champ de saisie de date actuel, change la “variable de formulaire” par “dateInput”.

  2. Crée un nouveau champ de texte et change la “variable de formulaire” de celui-ci par “checkin”.
    Attention, laisse le réglage de ce nouveau champ de formulaire sur “tous les types de contenus”, il ne faut pas exiger une date pour ce nouveau champ. Tu peux placer ce nouveau champ par dessous l’autre ou n’importe où dans la page, il sera de toute façon caché dès la fin de chargement de la page.

  3. Créez un embed, place-le n’importe où dans ta page et colle ce code :

<script>
window.addEventListener('load', function() {
    var dateField = document.getElementsByName('dateInput')[0];
    var checkinField = document.getElementsByName('checkin')[0];

    checkinField.style.display = 'none';

    dateField.addEventListener('change', function() {
        var date = new Date(this.value);
        var checkin = ("0" + date.getDate()).slice(-2) + '/' + 
                            ("0" + (date.getMonth() + 1)).slice(-2) + '/' + 
                            date.getFullYear();

        checkinField.value = checkin;
    });
});
</script>

  1. N’oublie pas de sauvegarder l’embed.

  2. Clique sur le bouton d’envoi du formulaire, désélectionne l’envoi de “dateInput” et sélectionne “checkin” afin qu’il envoi le champ avec la date formatée.

Normalement, le code devrait faire ce que tu souhaites. N’hésite pas si tu as besoin d’aide supplémentaire :blush:

Hello Laurent :wave:t3:,

It’s quite complex, but it’s possible. To precisely achieve the format checkin=24%2F04%2F2024, you can try another technique, which involves retrieving the date from the main field, formatting it as DD/MM/YYYY, and then transferring it to another text field that is invisible to the visitors. This invisible field will be the one sent with the form.

Here’s how to proceed:

  1. In your current date input field, change the “form variable” to “dateInput”.

  2. Create a new text field and change the “form variable” of this one to “checkin”.
    Be careful, keep the setting of this new form field to “all content types”, do not require a date for this new field. You can place this new field underneath the other or anywhere on the page, it will be hidden anyway as soon as the page loads.

  3. Create an embed, place it anywhere on your page, and paste this code:

Look above

  1. Don’t forget to save the embed.

  2. Click on the form submission button, deselect the sending of “dateInput” and select “checkin” so that it sends the field with the formatted date.

This code should do what you’re looking for. Don’t hesitate if you need more help :blush: