Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MA-896: Datetimepicker round 2 updates #800

Merged
merged 23 commits into from
Sep 22, 2022
Merged

MA-896: Datetimepicker round 2 updates #800

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
10edd68
chore(vbind): allow prop overriding of position-fixed, minor css stuff
mihai-peteu Sep 13, 2022
319a73c
chore(icon): calendar icon added
mihai-peteu Sep 14, 2022
dc01113
chore(icon): added the newer icon as well
mihai-peteu Sep 14, 2022
2e7adde
chore(cleanup): css block not needed
mihai-peteu Sep 14, 2022
48f10cd
chore(prop): calendarIcon boolean
mihai-peteu Sep 14, 2022
3337f05
fix(heading): specific font size and weight instead of h4, stick to o…
mihai-peteu Sep 14, 2022
fc4429f
chore(grid): replace flex layout with grid
mihai-peteu Sep 14, 2022
477b673
chore(flex): back to flex it is
mihai-peteu Sep 14, 2022
1c173dd
chore(flex): update calc and 3rd column selector
mihai-peteu Sep 14, 2022
9989228
chore(update): datetimepicker.md
mihai-peteu Sep 14, 2022
5c239de
chore(units): no rem allowed, only set min-width in analytics timefra…
mihai-peteu Sep 14, 2022
29e1e13
chore(font): abbreviated display should be 14px
mihai-peteu Sep 15, 2022
93e66fb
chore(css): padding change, and hoping comment removal fixes md
mihai-peteu Sep 15, 2022
cf17291
chore(cleanup): empty class and testid
mihai-peteu Sep 15, 2022
fc844b8
chore(comments): somewhat unplugged, but not fully
mihai-peteu Sep 16, 2022
3ab9aa9
chore(fullwidth): allow prop that sets input field to full width
mihai-peteu Sep 16, 2022
c638d4f
chore(width): switch to using exact width prop instead
mihai-peteu Sep 20, 2022
9ca3c73
chore(md): set a fixed with on relative timeframe picker example
mihai-peteu Sep 20, 2022
b835597
chore(review): cleanup md file, consistent testid naming
mihai-peteu Sep 21, 2022
7e4848e
chore(styling): css span solution for breaking text
mihai-peteu Sep 21, 2022
f230b00
chore(cleanup): htmlFormat param
mihai-peteu Sep 21, 2022
820a4c4
chore(comment): update md
mihai-peteu Sep 21, 2022
63ddc35
chore(css): max-width overflow guard
mihai-peteu Sep 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 18 additions & 23 deletions docs/components/datetimepicker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,17 @@

### Single date

Create a single date selection calendar
Create a single date selection calendar, with an example of passing in a fixed pixel width for the input field.

Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model)

<div>
<KDateTimePicker
v-model="currentValue1"
v-model="currentValue0"
@change="newVal => emitVal1 = newVal"
placeholder="Please select a date"
mode="date"
width="250"
:range="false"
/>
<div class="mt-6">Emitted value: <pre class="json">{{ JSON.stringify(emitVal1) }}</pre></div>
Expand All @@ -32,31 +34,11 @@ Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model)
@change="newVal => emitVal = newVal"
placeholder="Please select a date"
mode="date"
width="250"
:range="false"
/>
```

<!-- ### Single time

<div>
<KDateTimePicker
@change="newVal => emitVal2 = newVal"
placeholder="Please select a time"
mode="time"
:range="false"
/>
<div class="mt-6">Emitted value: <pre class="json">{{ currentValue2 }}</pre></div>
</div>

```html
<KDateTimePicker
@change="newVal => emitVal = newVal"
placeholder="Please select a time"
mode="time"
:range="false"
/>
``` -->

### Single date and time

Set the `v-model` to [Single date time picker](#single-date-time-picker-v-model)
Expand Down Expand Up @@ -124,6 +106,7 @@ This instance also makes use of the `minDate` and `maxDate` parameters, which ar
@change="newVal => emitVal5 = newVal"
placeholder="Please select a range"
mode="dateTime"
width="415"
:minDate="minDate"
:maxDate="maxDate"
:minute-increment="5"
Expand All @@ -139,6 +122,7 @@ This instance also makes use of the `minDate` and `maxDate` parameters, which ar
@change="newVal => emitVal = newVal"
placeholder="Please select a range"
mode="dateTime"
width="415"
:minDate="minDate"
:maxDate="maxDate"
:minute-increment="5"
Expand Down Expand Up @@ -182,6 +166,7 @@ This utilizes the same time frames as the previous example; however, in this exa
@change="newVal => emitVal6 = newVal"
placeholder="Please select a time frame"
mode="relative"
width="480"
:minDate="minDate"
:maxDate="maxDate"
:range="true"
Expand All @@ -196,6 +181,9 @@ This utilizes the same time frames as the previous example; however, in this exa
@change="newVal => emitVal = newVal"
placeholder="Please select a time frame"
mode="relative"
width="480"
:minDate="minDate"
:maxDate="maxDate"
:range="true"
:timePeriods=[
{
Expand Down Expand Up @@ -267,6 +255,12 @@ currentValue = {
}
```

### icon

A `Boolean` to show/hide the calendar icon displayed within the display field.

**default**: `true`

### minDate

A valid `Date` object (eg: `Mon Aug 15 2022 08:00:00 GMT-0700 (Pacific Daylight Time)`) which blocks out days/times that occur **before** the given timestamp. `minDate` gets passed down to the calendar component, and does not apply to relative time frames.
Expand Down Expand Up @@ -414,6 +408,7 @@ export default {
emitVal4: '',
emitVal5: '',
emitVal6: '',
currentValue0: new Date(),
currentValue1: new Date(),
currentValue2: new Date(),
currentValue3: new Date(),
Expand Down
Loading