Skip to content

Commit

Permalink
fix(datetimepicker): invalid value passed to formatTime [MA-2131] (#1881
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@mihai-peteu
mihai-peteu authored Dec 6, 2023
1 parent 5930656 commit 6dde6a5
Show file tree
Hide file tree
Showing 7 changed files with 377 additions and 253 deletions.
131 changes: 57 additions & 74 deletions docs/components/datetime-picker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,50 +6,49 @@

### Single date

Create a single date selection calendar, with an example of passing in a fixed pixel width for the input field, and an empty string for `currentValue` which defaults the input to the placeholder message.
Create a single date selection calendar, with an example of passing in a fixed pixel width for the input field, and null values for the `start` and `end` keys, which causes the input to display the placeholder message.

Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model)
Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model). Mode is set to `date`, which results in a calendar, but no timepicker.

<ClientOnly>
<KDateTimePicker
v-model="currentValue0"
v-model="singleDateEmpty"
clear-button
placeholder="Please select a date"
mode="date"
width="250"
:range="false"
/>
<br/>
<div>Emitted value: <pre class="json hide-from-percy">{{ JSON.stringify(currentValue0) }}</pre></div>
<div>Emitted value: <pre class="json hide-from-percy">{{ singleDateEmpty }}</pre></div>
</ClientOnly>

```html
<KDateTimePicker
v-model="currentValue"
@change="newVal => emitVal = newVal"
:range="false"
clear-button
placeholder="Please select a date"
mode="date"
width="250"
:range="false"
/>
```

### Single date and time

Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model)
Setting the `v-model` to [Single date time picker](#single-date-time-picker-v-model) with a `start` value of `new Date()` will initialize the datepicker with today's date. Mode is set to `dateTime`, which results in a calendar, and a timepicker.

<ClientOnly>
<KDateTimePicker
v-model="currentValue1"
v-model="singleDateToday"
clear-button
placeholder="Please select a date and time"
mode="dateTime"
:minute-increment="5"
:range="false"
/>
<br/>
<div>Emitted value: <pre class="json hide-from-percy">{{ JSON.stringify(currentValue1) }}</pre></div>
<div>Emitted value: <pre class="json hide-from-percy">{{ singleDateToday }}</pre></div>
</ClientOnly>

```html
Expand All @@ -59,25 +58,24 @@ Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model)
clear-button
placeholder="Please select a date and time"
mode="dateTime"
:minute-increment="5"
:range="false"
/>
```

### Date range

Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)
Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model).

<ClientOnly>
<KDateTimePicker
v-model="currentValue2"
v-model="dateRangeWeek"
clear-button
placeholder="Please select a date range"
mode="date"
:range="true"
/>
<br/>
<div>Emitted value: <pre class="json hide-from-percy">{{ currentValue2 }}</pre></div>
<div>Emitted value: <pre class="json hide-from-percy">{{ dateRangeWeek }}</pre></div>
</ClientOnly>

```html
Expand All @@ -97,15 +95,14 @@ Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)

<ClientOnly>
<KDateTimePicker
v-model="currentValue3"
v-model="dateRangeWeek"
clear-button
placeholder="Please select a date and time"
mode="dateTime"
:minute-increment="5"
:range="true"
/>
<br/>
<div>Emitted value: <pre class="json hide-from-percy">{{ currentValue3 }}</pre></div>
<div>Emitted value: <pre class="json hide-from-percy">{{ dateRangeWeek }}</pre></div>
</ClientOnly>

```html
Expand All @@ -115,7 +112,6 @@ Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)
clear-button
placeholder="Please select a date and time"
mode="dateTime"
:minute-increment="5"
:range="true"
/>
```
Expand All @@ -124,23 +120,23 @@ Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)

Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)

Display both a calendar and relative time frames, passing in a preset week-long range. Hide the time.
This instance also makes use of the `minDate` and `maxDate` parameters, which are both optional.
Display both a calendar and relative time frames, passing in a preset week-long range. The `mode` is set to `relativeDate`, which only shows monthly calendar.

This instance makes use of the optional `minDate` and `maxDate` parameters.

<ClientOnly>
<KDateTimePicker
v-model="currentValue4"
v-model="dateRangeWeek"
placeholder="Please select a range"
mode="relativeDate"
width="415"
:min-date="minDate"
:max-date="maxDate"
:minute-increment="5"
:range="true"
:time-periods="exampleTimeFrames"
/>
<br/>
<div>Emitted value: <pre class="json hide-from-percy">{{ currentValue4 }}</pre></div>
<div>Emitted value: <pre class="json hide-from-percy">{{ dateRangeWeek }}</pre></div>
</ClientOnly>

```html
Expand All @@ -152,7 +148,6 @@ This instance also makes use of the `minDate` and `maxDate` parameters, which ar
width="415"
:min-date="minDate"
:max-date="maxDate"
:minute-increment="5"
:range="true"
:time-periods="[
{
Expand Down Expand Up @@ -186,23 +181,23 @@ This instance also makes use of the `minDate` and `maxDate` parameters, which ar

Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)

Display both a calendar and relative time frames, passing in a preset week-long range.
This instance also makes use of the `minDate` and `maxDate` parameters, which are both optional.
Display both a calendar and relative time frames, passing in a preset week-long range. This instance makes use of the optional `minDate` and `maxDate` parameters.

Passing in a `timePeriodsKey` causes the instance to default to the "Relative" tab.

<ClientOnly>
<KDateTimePicker
v-model="currentValue5"
v-model="dateRangeWeekRelative"
placeholder="Please select a range"
mode="relativeDateTime"
width="415"
:min-date="minDate"
:max-date="maxDate"
:minute-increment="5"
:range="true"
:time-periods="exampleTimeFrames"
/>
<br/>
<div>Emitted value: <pre class="json hide-from-percy">{{ currentValue5 }}</pre></div>
<div>Emitted value: <pre class="json hide-from-percy">{{ dateRangeWeekRelative }}</pre></div>
</ClientOnly>

```html
Expand All @@ -214,7 +209,6 @@ This instance also makes use of the `minDate` and `maxDate` parameters, which ar
width="415"
:min-date="minDate"
:max-date="maxDate"
:minute-increment="5"
:range="true"
:time-periods="[
{
Expand Down Expand Up @@ -244,24 +238,24 @@ This instance also makes use of the `minDate` and `maxDate` parameters, which ar
/>
```

### Relative date and time
### Relative date and time only

Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model)
This utilizes the same time frames as the previous example; however, in this example we are passing in a pre-selected time frame.
Set the `v-model` to [Range date time picker](#range-date-time-picker-v-model).
This utilizes the same time frames as the previous example; however, in this case we are passing in a pre-selected time frame of one hour, and.

<ClientOnly>
<KDateTimePicker
v-model="currentValue6"
v-model="oneHourRelativeOnly"
placeholder="Please select a time frame"
mode="relative"
mode="relativeDate"
width="480"
:min-date="minDate"
:max-date="maxDate"
:range="true"
:time-periods="exampleTimeFrames"
/>
<br/>
<div>Emitted value: <pre class="json hide-from-percy">{{ currentValue6 }}</pre></div>
<div>Emitted value: <pre class="json hide-from-percy">{{ oneHourRelativeOnly }}</pre></div>
</ClientOnly>

```html
Expand Down Expand Up @@ -308,13 +302,13 @@ This utilizes the same time frames as the previous example; however, in this exa

#### Single date time picker `v-model`

A single date or time picker instance which can be seeded with a value as shown here, where `currentValue` is a valid Date object, eg: `new Date()` or an empty string, eg: `''` which will display the placeholder message.
A single date or time picker instance which can be seeded with a value as shown here, where `currentValue`'s `start` key contains a valid Date object, `new Date()` or a `null` value. If null, the picker will display the placeholder message and allow the user to make a selection.

```ts
<KDateTimePicker
v-model="currentValue"
...
/>
currentValue = {
start: new Date(),
end: null,
},
```

#### Range date time picker `v-model`
Expand All @@ -325,8 +319,8 @@ Can be seeded with a **relative time frame** by setting the `v-model` to `curren

```ts
currentValue = {
start: '',
end: '',
start: null,
end: null,
timePeriodsKey: TimeframeKeys.ONE_DAY
},
```
Expand Down Expand Up @@ -365,12 +359,6 @@ A valid `Date` object (eg: `Mon Aug 15 2022 08:00:00 GMT-0700 (Pacific Daylight

A valid `Date` object (eg: `Fri Aug 19 2022 12:00:00 GMT-0700 (Pacific Daylight Time)`) which blocks out days/times that occur **after** the given timestamp. `maxDate` gets passed down to the calendar component, and does not apply to relative time frames.

**default**: `null`

### minuteIncrement

A `Number` which sets the custom interval for the Minutes select dropdown.

**default**: `5`

### mode
Expand All @@ -391,7 +379,7 @@ Required `String` prop which accepts the following values:

### range

`Boolean` which determines whether the calendar allows selection of a **single** date or time, as opposed to a **range** of start and end values.
`Boolean` which determines whether the calendar allows selection of a **single** date or time, as opposed to a **range** of start and end values. Choosing any relative `mode` option will default the `range` to `true`.

**default**: `false`

Expand Down Expand Up @@ -434,16 +422,20 @@ An array of time frame values to be displayed as buttons in the "Relative" secti

## Events

The events below will fire whenever **Apply** is clicked (assuming the user has made a custom calendar or relative timeframe selection). If **Clear** is clicked, the object shape remains the same, but the values are empty strings.
The events below will fire whenever **Apply** is clicked (assuming the user has made a custom calendar or relative timeframe selection). If **Clear** is clicked, the object shape remains the same, but the `start` and `end` values will be `null`.

### Single date time picker

**Events**: `change`, `update:modelValue`

Will emit a JavaScript Date object, or an empty string "Clear".
Component will emit a JavaScript Date object for the `start` value, and a null value for `end`.
When "Clear" is clicked, it will emit null values for both `start` and `end`.

```ts
"2022-09-06T19:45:54.406Z" // ISO 8601 Date string
{
start: "2022-09-06T19:45:54.406Z",
end: null,
},
```

### Range date time picker
Expand All @@ -457,7 +449,7 @@ Will emit an `object` containing the following values:
"start": "2022-09-06T19:45:54.406Z", // ISO 8601 Date string
"end": "2022-09-07T19:45:54.406Z", // ISO 8601 Date string
"timePeriodsKey": "24h" // or "" if not applicable
}
}
```

<script>
Expand Down Expand Up @@ -501,36 +493,27 @@ export default {
const aWeekAgo = new Date(today.getTime() - (7*24*60*60*1000))
const aYearAgo = new Date(today.getTime() - (365*24*60*60*1000))
return {
currentValue0: new Date(),
currentValue1: new Date(),
currentValue2: {
start: twoDaysAgo,
end: today
singleDateEmpty: {
start: null,
end: null
},
currentValue3: {
start: twoDaysAgo,
end: today
singleDateToday: {
start: today,
end: null
},
currentValue4: {
start: twoDaysAgo,
end: today
},
currentValue5: {
dateRangeWeek: {
start: aWeekAgo,
end: today
},
currentValue6: {
dateRangeWeekRelative: {
start: aWeekAgo,
end: today,
timePeriodsKey: TimeframeKeys.SEVEN_DAY
},
rangeTwoday: {
start: twoDaysAgo,
end: today
},
rangeWeek: {
start: aWeekAgo,
end: today
oneHourRelativeOnly: {
start: null,
end: null,
timePeriodsKey: TimeframeKeys.ONE_HOUR
},
maxDate: today,
minDate: aYearAgo,
Expand Down
15 changes: 15 additions & 0 deletions docs/guide/migrating-to-version-9.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,21 @@ Kongponents styles are no longer designed to be utilized standalone, separately

### KDateTimePicker

#### Props

* `v-model` Single date and time picker's seed value (string in ISO date format) has been changed to a `TimeRange` object whose `start` value will be set to a Date ISO string; `end` value will be set to `null`.

See KDateTimePickers's [v-model](/components/datetime-picker#v-model) for more details

#### Events

* `change`, `update:modelValue` – a Single date and time picker will no longer emit an ISO date format string. Instead, a `TimeRange` object with a Date ISO string `start` value, and a null `end` value will be emitted.

See KDateTimePickers's [Single date time picker events](/components/datetime-picker#single-date-time-picker) for more details

#### Constants, Types & Interfaces

* `TimeRange` - `start` and `end` keys are now defined as `Date | null`

### KDropdownMenu

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
"sortablejs": "^1.15.0",
"swrv": "^1.0.4",
"uuid": "^9.0.1",
"v-calendar": "^3.0.3",
"v-calendar": "^3.1.2",
"vue-draggable-next": "^2.2.1"
},
"peerDependencies": {
Expand Down
Loading

0 comments on commit 6dde6a5

Please sign in to comment.