primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.3k stars 1.22k forks source link

DatePicker: sets time adjusted to timezone instead of using date only #6344

Open Real-Gecko opened 1 month ago

Real-Gecko commented 1 month ago

Describe the bug

I've noticed that when I use DatePicker in model it sets full time with adjustment to timezone instead of putting just date. So if I for example pick 2024-09-05 it'll set 2024-09-04T19:00:00.000Z in model and it'll be sent to the server. Is it possible to set only date like <input type="date"/> does?

Reproducer

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-csnodp

PrimeVue version

4.0.5

Vue version

4.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

AnthonyBerisha commented 1 month ago

Same issue here I got really confused when inputting 09/11/2024 and seeing that when pushing my form the date is 2024-09-10T22:00:00.000Z No transformations of the my part prior to POSTing my form

<DatePicker v-model="form.deadline_date" />

PrimeVue version

^4.0.0

Vue version

3.2.x

Language

Javascript

Build / Runtime

Vite

Real-Gecko commented 1 month ago

My current solution looks like this:

<script setup lang="ts">
import DatePicker from "primevue/datepicker"
import { inject, ref } from "vue"

const data: any = inject("data")
const errors: any = inject("errors")

const props = defineProps<{
  label: string
  name: string
}>()

const value = ref(
  data.value[props.name] ? new Date(data.value[props.name]) : undefined
)

function setDate(date: Date) {
  data.value[props.name] = date.toLocaleDateString`en-CA`
}
</script>

<template>
  <DatePicker
    class="form-control"
    :class="{ 'is-invalid': name in errors }"
    v-model="value"
    :invalid="errors[name]"
    size="small"
    date-format="dd.mm.yy"
    @update:model-value="setDate"
  />
</template>

So instead of passing data object directly to DatePicker's v-model I use setDate method to update ref which stores the data being sent to server.