# Date format in v-text-field

**URL:** https://discourse.nodered.org/t/date-format-in-v-text-field/86074
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [2 March 2024 11:34 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074 "2024-03-02T11:34:16Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [2 March 2024 11:34 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/1 "2024-03-02T11:34:16Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c01c33677a174dd0d368b4374383a4e91cb86cf1.png)

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

```auto
      <v-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>
      </v-card-text>

```

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:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/4965bf2e3ccbd3101d833859ef565625ca40c163.png)

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?

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [2 March 2024 12:02 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/2 "2024-03-02T12:02:32Z")

</div>

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

```auto
{
    "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:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dde5c0e5034659c4c10872bf25ecf1a0db927b61.png)

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.  
 ![chrome_2X83c78WIA](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/93090499c38812bbed2f731553ac44bb137602ec.gif)

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [2 March 2024 12:11 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/3 "2024-03-02T12:11:26Z")

</div>

> [@nygma2004](#):
>
> I have no problem with the YYYY-MM-DD date format, I am just not sure if this always be the case?

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

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [2 March 2024 12:12 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/4 "2024-03-02T12:12:31Z")

</div>

> [@Colin](#):
>
> 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?

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [2 March 2024 12:58 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/5 "2024-03-02T12:58:52Z")

</div>

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

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [2 March 2024 13:57 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/6 "2024-03-02T13:57:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [2 March 2024 15:57 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/7 "2024-03-02T15:57:51Z")

</div>

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,

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

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [2 March 2024 19:13 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/8 "2024-03-02T19:13:11Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [2 March 2024 19:18 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/9 "2024-03-02T19:18:41Z")

</div>

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

This is my template:

```auto
<template>
    <div>
        <div>{{startDate}}</div>
        <div>{{endDate}}</div>
        <v-btn @click="dialog=true">modify</v-btn>
    </div>
    <v-dialog v-model="dialog" max-width="600">
        <v-card prepend-icon="mdi-account" title="Times">
            <v-card-text>
                <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-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
            
                <v-btn text="Close" variant="plain" @click="cancel"></v-btn>
            
                <v-btn color="primary" text="Save" variant="tonal" @click="save"></v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
        data() {
            return {
                startDate: Date.now(),
                endDate: Date.now(),
                localStartDate: Date.now(),
                localEndDate: Date.now(),
                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}})
            },
        }
    }
</script>

```

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [2 March 2024 20:52 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/10 "2024-03-02T20:52:52Z")

</div>

> [@Steve-Mcl](#):
>
> I dont see the issue you see (but then you didnt share full flow)

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

```auto
[{"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.$socket.id)) { \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 this.dialogData.show = 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 this.dialogData.show = 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 this.dialogData.show = false;\n this.msg.payload = { action: this.dialogData.cancelText };\n this.send(this.msg);\n },\n onClickOutside () {\n this.dialogData.show = 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.

---

<div class="post-metadata">

### Author: ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [2 March 2024 22:54 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/11 "2024-03-02T22:54:19Z")

</div>

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

```auto
export default {
  data() {
    return {
        dialogData:null,
        fromdatevalue: Date.now(),
        todatevalue: Date.now(),
    }
  },

```

---

<div class="post-metadata">

### Author: ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)
#### Post date: [2 March 2024 23:45 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/12 "2024-03-02T23:45:24Z")

</div>

> [@Buckskin](#):
>
> ```auto
> fromdatevalue: Date.now(),
> todatevalue: Date.now(),
> 
> ```

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

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [16 March 2024 23:45 UTC](https://discourse.nodered.org/t/date-format-in-v-text-field/86074/13 "2024-03-16T23:45:28Z")

</div>

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