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

New Member
5 0 0

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:




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




    <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>
        document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})




    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hora de Nacimiento</title>
            .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 */
        <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 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 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>
        <!-- Add a hidden input field to store the captured time value -->
        <input type="hidden" id="horaDeNacimiento" name="properties[HORA DE NACIMIENTO]">
            document.addEventListener("DOMContentLoaded", function() {
            // 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;


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

Replies 0 (0)