Date format in v-text-field

This is probably more of a Vue question than DB2.

I used @Colin's dialog example to create a dialog field where I can enter a from and date:

I used v-text-field in the card text:

        <div class="text-h6" v-html="content"></div>
        <div class="d-flex py-2 justify-space-between"></div>
        <v-text-field :label="fromdatelabel" v-model="fromdatevalue" type="date"></v-text-field>
        <div class="d-flex py-2 justify-space-between"></div>
        <v-text-field :label="todatelabel" v-model="todatevalue" type="date"></v-text-field>

Maybe I should add them side-by-side but we can do styling later.

I can pass a date to these fields it is not a problem. I also get the date back when the OK button is pressed. That is also working.

The dates are coming in YYYY-MM-DD format:

My Windows is set in UK regional settings. I have no problem with the YYYY-MM-DD date format, I am just not sure if this always be the case?

I also noticed a wierd behaviour. I can pass a default from and to date in the payload:

    "title": "Date filter",
    "content": "Specify the from and to date for the filter below",
    "okText": "OK",
    "cancelText": "Cancel",
    "fromdatelabel": "From date",
    "fromdatevalue": "2024-03-22",
    "todatelabel": "To date",
    "todatevalue": "2024-04-22"

And that shows up when the dialog is shown:

All fine. Now I change the value in the From date, but immediately as I leave the field, the value is reset to the original value what I send to in the payload. But when I finally press the OK button, the template sends the value I set (not 22/03/2024 what I see on the screen).
And I only set the v-text-field v-model value in the msg watch function and I don't have a computed method on the field so it does not get overwritten when I edit the field value manually.

It depends on what you are going to do with it.

I mean can I guarantee that the Vue always sends the data in this format? So if I share my flow it will work for somebody else as well?

I certainly hope so, it would be a disaster otherwise.

@Colin: any ideas why the issue in my second post is happening?

Apparently the Vuetify date is based on the HTML date format

Note: The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.

Date changing does not happen for me on a non popup form,

Tried it in a popup form. Same, date does not change

1 Like

Oh great. Thanks for this reference, I did not find this.

I dont see the issue you see (but then you didnt share full flow)

This is my template:

        <v-btn @click="dialog=true">modify</v-btn>
    <v-dialog v-model="dialog" max-width="600">
        <v-card prepend-icon="mdi-account" title="Times">
                <div class="text-h6" v-html="content"></div>
                <div class="d-flex py-2 justify-space-between"></div>
                <v-text-field label="From" v-model="localStartDate" type="date"></v-text-field>
                <div class="d-flex py-2 justify-space-between"></div>
                <v-text-field label="To" v-model="localEndDate" type="date"></v-text-field>
                <v-btn text="Close" variant="plain" @click="cancel"></v-btn>
                <v-btn color="primary" text="Save" variant="tonal" @click="save"></v-btn>

    export default {
        data() {
            return {
                dialog: false
        watch: {
            msg: function () {
                if (msg.topic === "startDate") {
                    this.startDate = msg.payload
                if (msg.topic === "endDate") {
                    this.endDate = msg.payload

        methods: {
            cancel: function () {
                this.dialog = false
                this.localStartDate = this.startDate
                this.localEndDate = this.endDate
            save: function () {
                this.dialog = false
                this.startDate = this.localStartDate
                this.endDate = this.localEndDate
                this.send({payload:{startDate: this.startDate, endDate: this.endDate}})

Yes, yours works for me too, does not give the same behaviour. My example is this:

[{"id":"ba23c5db8f9b0c83","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"","ui":"cb79bc4520925e32","name":"From-To Dates dialog","order":0,"width":0,"height":0,"head":"","format":"<!-- \n  This pops up an OK/Cancel dialog when sent a payload of the form\n  {\n    title: \"Kitchen thermostat\",\n    content: \"Enter the target temperature\",\n    okText: \"OK\",         // optional, if not present defaults to OK\n    cancelText: \"Cancel\",   // optional, defaults to Cancel\n    fromdatelabel: \"From date\",\n    fromdatevalue: \"2024-03-22\",\n    todatelabel: \"To date\",\n    todatevalue: \"2024-04-22\"\n  }\n  All properties may contain embedded html tags such as <br/>\n  If msg._client is present and contains a socketId (as will be the case if the template is triggered\n  from another widget such as a button) then the popup will only appear on the matching session.\n  For example, if a button widget is fed into the template then the popup will appear only on the browser where the button\n  was clicked.\n  If msg._client is not present then the popup will appear on all connected browsers and will have to be acknowleged on each one.\n\n  When one of the buttons is clicked a message is sent with msg.payload containing the ok or cancel text\n-->\n<template>\n  <v-dialog width=\"auto\" v-model=\"showDialog\">\n    <v-card color=\"white\" v-click-outside=\"{handler: onClickOutside}\">\n      <v-toolbar color=\"primary\">\n        <v-card-title>\n          <span>{{title}}</span>\n        </v-card-title>\n      </v-toolbar>\n      <v-card-text>\n        <div class=\"text-h6\" v-html=\"content\"></div>\n        <div class=\"d-flex py-2 justify-space-between\"></div>\n        <v-text-field :label=\"fromdatelabel\" v-model=\"fromdatevalue\" type=\"date\"></v-text-field>\n        <div class=\"d-flex py-2 justify-space-between\"></div>\n        <v-text-field :label=\"todatelabel\" v-model=\"todatevalue\" type=\"date\"></v-text-field>\n      </v-card-text>\n      \n      <v-card-actions class=\"justify-end\">\n        <v-btn variant=\"elevated\" size=\"large\" @click=\"cancelDialog\" v-html=\"cancelText\"></v-btn>\n        <v-btn variant=\"elevated\" size=\"large\" @click=\"okDialog\" v-html=\"okText\"></v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n        dialogData:null\n    }\n  },\n  watch: {\n      msg: function(){\n          // only show the dialog if msg.payload is an object and the socket id in the message\n          // matches our socket id (which means the popup was initiated from this session) or\n          // there is no _client property present which indicates it should be shown on all sessions.\n          if (typeof this.msg.payload === \"object\" && (!this.msg._client || this.msg._client.socketId === this.$ {                  \n              this.dialogData = this.msg.payload;\n              if (!this.dialogData.okText) {\n                this.dialogData.okText = \"OK\";\n              }\n              if (!this.dialogData.cancelText) {\n                this.dialogData.cancelText = \"Cancel\";\n              }\n     = true;\n              this.fromdatevalue = this.msg.payload?.fromdatevalue ?? \"\";\n              this.todatevalue = this.msg.payload?.todatevalue ?? \"\";\n          }\n          // prevent redraw on deploy\n          this.msg.payload = null\n      }\n  },\n  methods:{\n    okDialog:function(){\n = false;\n      this.msg.payload = { action: this.dialogData.okText, fromdatevalue: this.fromdatevalue, todatevalue: this.todatevalue };\n      this.send(this.msg);\n    },\n    cancelDialog:function(){\n = false;\n      this.msg.payload = { action: this.dialogData.cancelText };\n      this.send(this.msg);\n    },\n    onClickOutside () {\n = false;\n      this.msg.payload = { action: this.dialogData.cancelText };\n      this.send(this.msg);\n    },\n  },\n  computed : {\n    title:function(){\n      return this.dialogData?.title ?? \"\"\n    },\n    content:function(){\n      return this.dialogData?.content ?? \"\"\n    },\n    okText:function(){\n      return this.dialogData?.okText ?? \"OK\"\n    },\n    cancelText:function(){\n      return this.dialogData?.cancelText ?? \"Cancel\"\n    },\n    showDialog: function (){\n      return this.dialogData?.show === true\n    },\n    fromdatelabel: function (){\n      return this.dialogData?.fromdatelabel ?? \"\"\n    },\n    todatelabel: function (){\n      return this.dialogData?.todatelabel ?? \"\"\n    }\n  },\n  unmounted () {\n    this.dialogData = null\n  }\n}\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:ui","className":"","x":400,"y":2240,"wires":[["3a4255f2ffce7ddc"]]},{"id":"915ca95b708cb602","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Hello","payload":"{\"title\":\"Date filter\",\"content\":\"Specify the from and to date for the filter below\",\"okText\":\"OK\",\"cancelText\":\"Cancel\",\"fromdatelabel\":\"From date\",\"fromdatevalue\":\"2024-03-22\",\"todatelabel\":\"To date\",\"todatevalue\":\"2024-04-22\"}","payloadType":"json","x":160,"y":2240,"wires":[["ba23c5db8f9b0c83"]]},{"id":"3a4255f2ffce7ddc","type":"debug","z":"0e3249ddee2000e3","name":"debug 361","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":610,"y":2240,"wires":[]},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false}]

You have two sets of variables for each fields, but I don't really see how that should make a differennce.

You need something to anchor the two dates, there is no this.fromdatevale or this.todatevalue

export default {
  data() {
    return {

Thanks a lot, this is what I was missing. I have not realized it.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.