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

babyprints · ‎05-30-2024

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

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"

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!!!

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

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

Community Blog Articles