Framework7 Calendar error Invalid Time Value

Wappler General Need Help
,
1

Hi Guys

I have an issue with sending a dynamic initial value to a Framework7 Calendar component, the dynamic value is coming as parameter.

Wappler Version : 7.1.0
Operating System : Windows 11
Server Model: Mobile Framework7-Capacitor
Database Type: MySQL
Hosting Type: Custom

I tried different ways (formats) to assign a dynamic initial value to the calendar component, and it shows this error:

Calendar error

My code:

<div class="list list-strong-ios list-outline-ios">
        <ul>
          <div class="list-label">Fecha Inicio</div>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input id="FechaInicio" name="fecha_inicio" type="text" is="dmx-f7-calendar" time-picker-placeholder="Elige la fecha inicio" locale="ES" toolbar-close-text="Elegir" dmx-bind:value="app.main.f7page.route.params.fecha.formatDate('yyyy-MM-dd').concat('T06:00:00.00')">
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

I tried some other options as:

dmx-bind:value="app.main.f7page.route.params.fecha.formatDate('yyyy-MM-dd'))"
dmx-bind:value="app.main.f7page.route.params.fecha.formatDate('MM-dd-yyyy')"
dmx-bind:value="app.main.f7page.route.params.fecha.formatDate('dd-MM-yyyy')"
dmx-bind:value="app.main.f7page.route.params.fecha.formatDate('dd/MM/yyyy')"
dmx-bind:value="app.main.f7page.route.params.fecha"

The result is the same: Invalid Time Value Qr.a.monthFormatter(calendar-class.js:57)

If I print the dynamic value into an input textbox it shows the parameter's value (formatted):
image

Can somebody help me with this? I don´t know if it is a bug or I am doing something wrong?

Thanks!

2

Can you try mm instead of MM:

On F7 docs:

mm - 2 digits month number, from 01 to 12

3

Hi @franse

Thanks for your response, I tried your suggestion but got no lucky, I got the same error; I tried every option from the above post with the same result.

Even this:

dmx-bind:value="'08-05-2025'"
dmx-bind:value="'08-05-2025 00:00:00'"

The result:

BaseComponent.js:59 RangeError: Invalid time value
    at Qr.formatDate (framework7-bundle.min.js:13)
    at framework7-bundle.min.js:13
    at Array.map (<anonymous>)
    at Qr.formatValue (framework7-bundle.min.js:13)
    at Qr.updateValue (framework7-bundle.min.js:13)
    at Qr.setValue (framework7-bundle.min.js:13)
    at Qr.init (framework7-bundle.min.js:13)
    at new Qr (framework7-bundle.min.js:13)
    at Object.create (framework7-bundle.min.js:13)
    at dmxFramework7_8.js:7

Thank you!

4

Ah yes, the problem is that the component needs an array for initial value:

image
image1038×515 78.3 KB

So you can try something like:

dmx-bind:value="['2025-07-02T03:00:00.000Z']">

image

In your case it should be:

 dmx-bind:value="[app.main.f7page.route.params.fecha]">

Seems to work:
image

image

5

Hi @franse

Thanks for taking your time in this, and you right, it works as an array, I tried as your example, using a hard code value in a variable and it works fine; but when I tried assigning the dynamic value from the parameter the error happens again.

This works fine

dmx-bind:value="['2025-07-02T03:00:00.000Z']"

But this isn't works

dmx-bind:value="app.main.f7page.route.params.fecha"

Calendar error2

Calendar error3
Calendar error3732×433 23.4 KB

Maybe is a datatype related from the parameter, I'll continue the tests,

Thanks again!

6

Try this:

Using [ ]

7

Hi @franse

Yes, I tried that way with the same error result, I tried also forcing .toString()

dmx-bind:value="[app.main.f7page.route.params.fecha]"

Thank you!

8

Can you check what params are there?
Copy the value here
Just type dmx.app.data on console and navigate until you see it

9

Hi @franse

This is the result:

{
    "$type": "app",
    "query": {},
    "flowGoToVacRequest": {
        "$type": "flow",
        "data": {},
        "running": false,
        "lastError": null
    },
    "flwBienvenido": {
        "$type": "flow",
        "data": null,
        "running": false,
        "lastError": null
    },
    "flwCloseSession": {
        "$type": "flow",
        "data": null,
        "running": false,
        "lastError": null
    },
    "app": {
        "$type": "f7-app",
        "name": "Framework7",
        "theme": "md",
        "darkMode": "auto",
        "initialized": true,
        "device": {
            "ios": false,
            "android": true,
            "androidChrome": true,
            "desktop": false,
            "iphone": false,
            "ipod": false,
            "ipad": false,
            "edge": false,
            "ie": false,
            "firefox": false,
            "macos": false,
            "windows": false,
            "cordova": true,
            "electron": false,
            "capacitor": true,
            "nwjs": false,
            "os": "android",
            "osVersion": "12",
            "webView": false,
            "webview": false,
            "standalone": false,
            "pixelRatio": 3.5
        },
        "online": true,
        "srvcnnLoggeduserDtls": {
            "$type": "serverconnect",
            "status": 200,
            "data": {
                "identity": 1142,
                "query": {
                    "id": 1142,
                    "nombre": "LUIS FERNANDO",
                    "apellido": "SALDAÑA SANTIAGO",
                    "grupo": 2,
                    "activo": 1,
                    "ultimo_login": "2025-07-08T13:32:44.000Z",
                    "institucion_id": 2,
                    "nit": "",
                    "permiso_id": 2,
                    "empleado_id": 3766
                }
            },
            "links": {},
            "paging": {
                "page": 1,
                "pages": 1,
                "items": 0,
                "has": {
                    "first": false,
                    "prev": false,
                    "next": false,
                    "last": false
                }
            },
            "headers": {
                "content-length": "503",
                "content-type": "application/json; charset=utf-8"
            },
            "state": {
                "executing": false,
                "uploading": false,
                "processing": false,
                "downloading": false
            },
            "uploadProgress": {
                "position": 0,
                "total": 0,
                "percent": 0
            },
            "downloadProgress": {
                "position": 0,
                "total": 0,
                "percent": 0
            },
            "lastError": {
                "status": 0,
                "message": "",
                "response": null
            }
        },
        "srvcnnEmployeeProfile": {
            "$type": "serverconnect",
            "status": 200,
            "data": {
                "identity": 1142,
                "qryProfileByEmployeeId": {
                    "nombres": "LUIS FERNANDO",
                    "apellidos": "SALDAÑA SANTIAGO",
                    "fotografia": "/assets/files/employees/square/1918769091609.jpg",
                    "nit": "14064596",
                    "rh_puesto_empleado": [
                        {
                            "ejercicio": "2025",
                            "fecha_emision": "2025-01-02T06:00:00.000Z",
                            "vigencia": null,
                            "pagos": null,
                            "monto_total": null,
                            "fecha_inicio": "2025-01-02",
                            "fecha_fin": "2025-06-30",
                            "npg": null,
                            "puesto_oficial": null,
                            "estado_puesto": "APROBADO",
                            "estado_ocupacion": "APROBADO",
                            "puesto_empleado_id": 3572
                        }
                    ],
                    "vacaciones": [],
                    "familiar": []
                },
                "qryJerarquia": []
            },
            "links": {},
            "paging": {
                "page": 1,
                "pages": 1,
                "items": 0,
                "has": {
                    "first": false,
                    "prev": false,
                    "next": false,
                    "last": false
                }
            },
            "headers": {
                "content-type": "application/json; charset=utf-8"
            },
            "state": {
                "executing": false,
                "uploading": false,
                "processing": false,
                "downloading": false
            },
            "uploadProgress": {
                "position": 0,
                "total": 0,
                "percent": 0
            },
            "downloadProgress": {
                "position": 0,
                "total": 0,
                "percent": 0
            },
            "lastError": {
                "status": 0,
                "message": "",
                "response": null
            }
        },
        "srvcnnLogout": {
            "$type": "serverconnect",
            "status": 0,
            "data": null,
            "links": {},
            "paging": {},
            "headers": {},
            "state": {
                "executing": false,
                "uploading": false,
                "processing": false,
                "downloading": false
            },
            "uploadProgress": {
                "position": 0,
                "percent": 0,
                "total": 0
            },
            "downloadProgress": {
                "position": 0,
                "percent": 0,
                "total": 0
            },
            "lastError": {
                "status": 0,
                "message": "",
                "response": null
            }
        },
        "main": {
            "$type": "f7-view",
            "f7page": {
                "$type": "f7-page",
                "route": {
                    "query": {},
                    "params": {
                        "fecha": "2025-07-17"
                    },
                    "url": "/vacrequest/2025-07-17",
                    "path": "/vacrequest/2025-07-17",
                    "route": {
                        "path": "/vacrequest/:fecha",
                        "url": "./vacrequest.html"
                    }
                },
                "srvcnnTipoGestion": {
                    "$type": "serverconnect",
                    "status": 200,
                    "data": {
                        "identity": 1142,
                        "qryGetTipoGestion": [
                            {
                                "id": 8,
                                "nombre": "LICENCIA",
                                "nombre_corto": "LICENCIA",
                                "usa_causa": 0,
                                "usa_evento": 1
                            },
                            {
                                "id": 6,
                                "nombre": "PERMISO",
                                "nombre_corto": "PERMISO",
                                "usa_causa": 1,
                                "usa_evento": 0
                            },
                            {
                                "id": 1,
                                "nombre": "SOLICITUD Y AUTORIZACIÓN DE VACACIONES",
                                "nombre_corto": "VACACIONES",
                                "usa_causa": 0,
                                "usa_evento": 0
                            }
                        ]
                    },
                    "links": {},
                    "paging": {
                        "page": 1,
                        "pages": 1,
                        "items": 0,
                        "has": {
                            "first": false,
                            "prev": false,
                            "next": false,
                            "last": false
                        }
                    },
                    "headers": {
                        "content-length": "322",
                        "content-type": "application/json; charset=utf-8"
                    },
                    "state": {
                        "executing": false,
                        "uploading": false,
                        "processing": false,
                        "downloading": false
                    },
                    "uploadProgress": {
                        "position": 0,
                        "total": 0,
                        "percent": 0
                    },
                    "downloadProgress": {
                        "position": 0,
                        "total": 0,
                        "percent": 0
                    },
                    "lastError": {
                        "status": 0,
                        "message": "",
                        "response": null
                    }
                },
                "srvcnnCausaPermiso": {
                    "$type": "serverconnect",
                    "status": 200,
                    "data": {
                        "identity": 1142,
                        "qryGetCausaPermiso": [
                            {
                                "id": 6,
                                "nombre": "Aniversarios de las Dependencias"
                            },
                            {
                                "id": 10,
                                "nombre": "Asuntos acad�micos"
                            },
                            {
                                "id": 7,
                                "nombre": "Cambio de Fecha para disfrutar el d�a de descanso por cumplea�os"
                            },
                            {
                                "id": 2,
                                "nombre": "Cita centro educativo hijos(as)"
                            },
                            {
                                "id": 4,
                                "nombre": "Cita IGSS"
                            },
                            {
                                "id": 5,
                                "nombre": "Cita M�dico Particular"
                            },
                            {
                                "id": 8,
                                "nombre": "Comisiones Oficiales"
                            },
                            {
                                "id": 9,
                                "nombre": "D�a del Sindicato SINTRAFIP"
                            },
                            {
                                "id": 3,
                                "nombre": "Examenes de Laboratorio"
                            },
                            {
                                "id": 1,
                                "nombre": "Otros"
                            }
                        ]
                    },
                    "links": {},
                    "paging": {
                        "page": 1,
                        "pages": 1,
                        "items": 0,
                        "has": {
                            "first": false,
                            "prev": false,
                            "next": false,
                            "last": false
                        }
                    },
                    "headers": {
                        "content-length": "512",
                        "content-type": "application/json; charset=utf-8"
                    },
                    "state": {
                        "executing": false,
                        "uploading": false,
                        "processing": false,
                        "downloading": false
                    },
                    "uploadProgress": {
                        "position": 0,
                        "total": 0,
                        "percent": 0
                    },
                    "downloadProgress": {
                        "position": 0,
                        "total": 0,
                        "percent": 0
                    },
                    "lastError": {
                        "status": 0,
                        "message": "",
                        "response": null
                    }
                },
                "srvcnnTipoGestionDtls": {
                    "$type": "serverconnect",
                    "status": 0,
                    "data": null,
                    "links": {},
                    "paging": {},
                    "headers": {},
                    "state": {
                        "executing": false,
                        "uploading": false,
                        "processing": false,
                        "downloading": false
                    },
                    "uploadProgress": {
                        "position": 0,
                        "percent": 0,
                        "total": 0
                    },
                    "downloadProgress": {
                        "position": 0,
                        "percent": 0,
                        "total": 0
                    },
                    "lastError": {
                        "status": 0,
                        "message": "",
                        "response": null
                    }
                },
                "srvcnnTipoEvento": {
                    "$type": "serverconnect",
                    "status": 0,
                    "data": null,
                    "links": {},
                    "paging": {},
                    "headers": {},
                    "state": {
                        "executing": false,
                        "uploading": false,
                        "processing": false,
                        "downloading": false
                    },
                    "uploadProgress": {
                        "position": 0,
                        "percent": 0,
                        "total": 0
                    },
                    "downloadProgress": {
                        "position": 0,
                        "percent": 0,
                        "total": 0
                    },
                    "lastError": {
                        "status": 0,
                        "message": "",
                        "response": null
                    }
                },
                "vFechaParametro": {
                    "$type": "value",
                    "value": "2025-07-17"
                },
                "frmRequest": {
                    "$type": "form",
                    "pickTipoGestion": {
                        "$type": "f7-picker",
                        "value": [],
                        "opened": false
                    },
                    "pickCausa": {
                        "$type": "f7-picker",
                        "value": [],
                        "opened": false
                    },
                    "pickTipoLicencia": {
                        "$type": "f7-picker",
                        "value": [],
                        "opened": false
                    },
                    "FechaInicio": {
                        "$type": "f7-calendar",
                        "value": [],
                        "opened": false
                    },
                    "prueba": {
                        "$type": "input",
                        "disabled": false,
                        "focused": false,
                        "invalid": false,
                        "validationMessage": "",
                        "value": "2025-07-17"
                    }
                }
            }
        }
    }
}

Thanks!

10

Are you testing on android studio? What about on chrome? Just preview it like a normal page

11

In both of them I got the same result. Chrome:

Calendar error6
Calendar error61881×584 69.6 KB

Android (from emulator, not directly from Android Studio)

Calendar error5
Calendar error5536×940 115 KB

Calendar error4
Calendar error41078×221 23.6 KB

Regards!