Unwanted formats for date and time in cart coming from data of date and time picker.

babyprints
New Member
5 0 0

In my product page I created a Date Picker (Fecha de Nacimiento) and a Time picker (Hora de Nacimiento).

babyprints_0-1717077703678.png

 

 

When I fill the Date and Time Picker and I add the selection to the cart I get to problems (in the cart):

 

1) The date is presented in format YYYY-MM-DD whereas I would like to present it as DD-MM-YYYY.

2)The hour is shown in hash format. For example {"hora"=>"11", "minuto"=>"20", "ampm"=>"AM" in stead of "11:20 AM"

babyprints_1-1717077780772.png

 

The page of the product is the following:

 

https://346c63-c8.myshopify.com/products/acuarela-acurrucado?variant=43647491211471 

 

The codes of the Date and Time picker are the following:

 

  • DATE PICKER

     

    <style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem;font-family: var(--font-body-family);color: rgba(var(--color-foreground),.75);font-size: 1.2rem;}</style>  
    <label class="form__label custom">FECHA DE NACIMIENTO</label>
    <div class="field custom">
    <input class="field__input" type="date" form="{{ 'product-form-' | append: section.id }}"  
    name="properties[FECHA DE NACIMIENTO]" required>
        <script>
        document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
        </script>
    </div>

     

  • TIME PICKER

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hora de Nacimiento</title>
        <style>
            .custom.form__label {
                margin-bottom: 0.6rem;
            }
            
            .field.custom {
                margin-top: 0;
            }
            
            .custom .field__input {
                padding-top: 0.8rem;
                font-family: var(--font-body-family);
                color: rgba(var(--color-foreground), .75);
                font-size: 1.2rem;
            }
    
            .time-input {
                display: flex;
                align-items: center;
            }
            .time-input select {
                margin-right: 5px; /* Adjust spacing between select elements */
            }
            .field.custom {
                display: flex;
                align-items: center;
            }
            .field.custom .time-input {
                width: 60%; /* Adjust the width of the time input */
            }
            .field.custom #ampm {
                width: 30%; /* Adjust the width of the AM/PM selector */
            }
        </style>
    </head>
    <body>
        <label class="form__label custom" for="hora">Hora de Nacimiento (Opcional)</label>
        <div class="field custom">
            <div class="time-input">
                <select class="field__input" form="{{ 'product-form-' | append: section.id }}" id="hora" name="properties[HORA DE NACIMIENTO][hora]">
                    <option value="">Hora</option>
                    {% for hora in (1..12) %}
                        <option value="{{ hora }}">{{ hora }}</option>
                    {% endfor %}
                </select>
                <span>:</span>
                <select class="field__input" form="{{ 'product-form-' | append: section.id }}" id="minuto" name="properties[HORA DE NACIMIENTO][minuto]">
                    <option value="">Minuto</option>
                    {% for minuto in (0..59) %}
                        <option value="{{ minuto }}">{{ minuto }}</option>
                    {% endfor %}
                </select>
            </div>
            <select class="field__input" form="{{ 'product-form-' | append: section.id }}" id="ampm" name="properties[HORA DE NACIMIENTO][ampm]">
                <option value="AM">AM</option>
                <option value="PM">PM</option>
            </select>
        </div>
    
        <!-- Add a hidden input field to store the captured time value -->
        <input type="hidden" id="horaDeNacimiento" name="properties[HORA DE NACIMIENTO]">
    
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                document.querySelector("form").removeAttribute("novalidate");
            });
    
            // JavaScript to capture time input data and pass it to the cart
            document.getElementById("hora").addEventListener("change", updateHiddenInput);
            document.getElementById("minuto").addEventListener("change", updateHiddenInput);
            document.getElementById("ampm").addEventListener("change", updateHiddenInput);
    
            function updateHiddenInput() {
                var hora = document.getElementById("hora").value;
                var minuto = document.getElementById("minuto").value;
                var ampm = document.getElementById("ampm").value;
                var timeValue = hora + ":" + minuto + " " + ampm;
                var hiddenInput = document.getElementById("horaDeNacimiento");
                hiddenInput.value = timeValue;
            }
        </script>
    </body>
    </html>
    
    

     

I would truly appreciate your help. I barely no coding, this has all been setup with a lot of effort!!!

Replies 0 (0)