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

Store Design
, , , , ,

Topic summary

A user is experiencing formatting issues with date and time picker data when it appears in the shopping cart:

Problems identified:

  • Date displays as YYYY-MM-DD instead of the desired DD-MM-YYYY format
  • Time appears as raw hash data (e.g., {“hora”=>“11”, “minuto”=>“20”, “ampm”=>“AM”}) rather than formatted as “11:20 AM”

Context:

  • The date picker (“Fecha de Nacimiento”) and time picker (“Hora de Nacimiento”) work correctly on the product page
  • Screenshots show the properly formatted inputs on the product page versus the unformatted output in the cart
  • The user has shared their product page URL and included the HTML/CSS/JavaScript code for both pickers

Current status:
The discussion remains open with no responses yet. The user needs help reformatting how these custom property values display in the cart, likely requiring modifications to the cart template or the way the data is stored/processed.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

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

babyprints_0-1717077703678.png
babyprints_0-1717077703678.png1399×861 38.7 KB

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
babyprints_1-1717077780772.png1416×809 48 KB

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