@@ -53,19 +53,20 @@ export function DateField({
53
53
variant = "small" ,
54
54
} : DateFieldProps ) {
55
55
const [ value , setValue ] = useState < undefined | CalendarDateTime > (
56
- utcDateToCalendarDate ( defaultValue )
56
+ dateToCalendarDate ( defaultValue )
57
57
) ;
58
58
59
59
const state = useDateFieldState ( {
60
60
value : value ,
61
61
onChange : ( value ) => {
62
62
if ( value ) {
63
63
setValue ( value ) ;
64
- onValueChange ?.( value . toDate ( "utc" ) ) ;
64
+ const timeZone = Intl . DateTimeFormat ( ) . resolvedOptions ( ) . timeZone ;
65
+ onValueChange ?.( value . toDate ( timeZone ) ) ;
65
66
}
66
67
} ,
67
- minValue : utcDateToCalendarDate ( minValue ) ,
68
- maxValue : utcDateToCalendarDate ( maxValue ) ,
68
+ minValue : dateToCalendarDate ( minValue ) ,
69
+ maxValue : dateToCalendarDate ( maxValue ) ,
69
70
shouldForceLeadingZeros : true ,
70
71
granularity,
71
72
locale : "en-US" ,
@@ -78,7 +79,7 @@ export function DateField({
78
79
useEffect ( ( ) => {
79
80
if ( state . value === undefined && defaultValue === undefined ) return ;
80
81
81
- const calendarDate = utcDateToCalendarDate ( defaultValue ) ;
82
+ const calendarDate = dateToCalendarDate ( defaultValue ) ;
82
83
//unchanged
83
84
if ( state . value ?. toDate ( "utc" ) . getTime ( ) === defaultValue ?. getTime ( ) ) {
84
85
return ;
@@ -136,7 +137,7 @@ export function DateField({
136
137
variant = { variants [ variant ] . nowButtonVariant }
137
138
onClick = { ( ) => {
138
139
const now = new Date ( ) ;
139
- setValue ( utcDateToCalendarDate ( new Date ( ) ) ) ;
140
+ setValue ( dateToCalendarDate ( new Date ( ) ) ) ;
140
141
onValueChange ?.( now ) ;
141
142
} }
142
143
>
@@ -186,6 +187,19 @@ function utcDateToCalendarDate(date?: Date) {
186
187
: undefined ;
187
188
}
188
189
190
+ function dateToCalendarDate ( date ?: Date ) {
191
+ return date
192
+ ? new CalendarDateTime (
193
+ date . getFullYear ( ) ,
194
+ date . getMonth ( ) + 1 ,
195
+ date . getDate ( ) ,
196
+ date . getHours ( ) ,
197
+ date . getMinutes ( ) ,
198
+ date . getSeconds ( )
199
+ )
200
+ : undefined ;
201
+ }
202
+
189
203
type DateSegmentProps = {
190
204
segment : DateSegment ;
191
205
state : DateFieldState ;
0 commit comments