@@ -234,7 +315,7 @@ export class DatePicker {
class={`chi-input
${this.active ? '-focus' : ''}`}
type={`text`}
- placeholder={`MM/DD/YYYY`}
+ placeholder={this.mode === 'datetime' ? `MM/DD/YYYY, --:-- --` : `MM/DD/YYYY`}
ref={el => (this._input = el as HTMLInputElement)}
value={this.value}
onChange={() => {
diff --git a/src/custom-elements/src/components/time-picker/time-picker.scss b/src/custom-elements/src/components/time-picker/time-picker.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/custom-elements/src/components/time-picker/time-picker.tsx b/src/custom-elements/src/components/time-picker/time-picker.tsx
new file mode 100644
index 000000000..b2fd0bb73
--- /dev/null
+++ b/src/custom-elements/src/components/time-picker/time-picker.tsx
@@ -0,0 +1,202 @@
+import { Component, Element, Listen, Method, Prop, h } from '@stencil/core';
+import { contains, uuid4 } from '../../utils/utils';
+import { CHI_TIME_AUTO_SCROLL_DELAY,
+ ESCAPE_KEYCODE,
+ DatePickerFormats} from '../../constants/constants';
+import { TIME_CLASSES } from '../../constants/classes';
+
+@Component({
+ tag: 'chi-time-picker',
+ scoped: true
+})
+export class TimePicker {
+ /**
+ * Selected time of Time Picker
+ */
+ @Prop({ reflect: true, mutable: true }) value: string;
+
+ /**
+ * To disable chi-time-picker.
+ */
+ @Prop({ reflect: true }) disabled = false;
+
+ /**
+ * Displaying seconds column
+ */
+ @Prop({ reflect: true }) displaySeconds = false;
+
+ /**
+ * To specify excluded hours.
+ */
+ @Prop({ reflect: true }) _excludedHours: string;
+
+ /**
+ * To specify excluded minutes.
+ */
+ @Prop({ reflect: true }) _excludedMinutes: string;
+
+ /**
+ * To specify excluded seconds.
+ */
+ @Prop({ reflect: true }) _excludedSeconds: string;
+
+ /**
+ * To define format of Time Picker.
+ */
+ @Prop({ reflect: true }) format: DatePickerFormats = '12hr';
+
+ /**
+ * Indicates whether the time picker popover is open or closed
+ */
+ @Prop({ reflect: true, mutable: true }) active = false;
+
+ @Element() el: HTMLElement;
+
+ private _input: HTMLInputElement;
+ private _uuid: string;
+
+ _onFocusIn(e) {
+ if (e.target !== document.body && e.target !== null) {
+ this.active = contains(this.el, e.target);
+ }
+ }
+
+ _onClick(e) {
+ if (
+ e.target !== document.body &&
+ e.target !== null
+ ) {
+ this.active = contains(this.el, e.target);
+ }
+ }
+
+ _onKeyUp(e) {
+ if (
+ 'key' in e &&
+ (e.key === 'Escape' || e.key === 'Esc' || e.key === ESCAPE_KEYCODE)
+ ) {
+ this.active = false;
+ this._input.blur();
+ }
+ }
+
+ /**
+ * Sets time
+ */
+ @Method()
+ async setTime(time: string) {
+ this.value = time;
+ }
+
+ /**
+ * Gets time
+ */
+ @Method()
+ getTime() {
+ return Promise.resolve(this.value);
+ }
+
+ componentWillLoad(): void {
+ this._onFocusIn = this._onFocusIn.bind(this);
+ this._onClick = this._onClick.bind(this);
+ this._onKeyUp = this._onKeyUp.bind(this);
+ this._uuid = this.el.id ? this.el.id : `tp-${uuid4()}`;
+ }
+
+ componentDidLoad(): void {
+ document.body.addEventListener('focusin', this._onFocusIn);
+ document.body.addEventListener('click', this._onClick);
+ document.body.addEventListener('keyup', this._onKeyUp);
+ }
+
+ componentDidUnload(): void {
+ document.body.removeEventListener('focusin', this._onFocusIn);
+ document.body.removeEventListener('click', this._onClick);
+ document.body.removeEventListener('keyup', this._onKeyUp);
+ }
+
+ @Listen('chiPopoverShow')
+ handlePopoverOpen(ev) {
+ ev.stopPropagation();
+ const hoursColumn = this.el.querySelector(`.${TIME_CLASSES.HOURS}`) as HTMLElement;
+ const minutesColumn = this.el.querySelector(`.${TIME_CLASSES.MINUTES}`) as HTMLElement;
+ const secondsColumn = this.el.querySelector(`.${TIME_CLASSES.SECONDS}`) as HTMLElement;
+
+ setTimeout(() => {
+ if (hoursColumn) {
+ const activeHour = hoursColumn.querySelector(`.${TIME_CLASSES.HOUR}.-active`) as HTMLElement;
+
+ if (activeHour) {
+ hoursColumn.scrollTop = activeHour.offsetTop - 4;
+ }
+ }
+ if (minutesColumn) {
+ const activeMinute = minutesColumn.querySelector(`.${TIME_CLASSES.MINUTE}.-active`) as HTMLElement;
+
+ if (activeMinute) {
+ minutesColumn.scrollTop = activeMinute.offsetTop - 4;
+ }
+ }
+ if (secondsColumn) {
+ const activeSecond = secondsColumn.querySelector(`.${TIME_CLASSES.SECOND}.-active`) as HTMLElement;
+
+ if (activeSecond) {
+ secondsColumn.scrollTop = activeSecond.offsetTop - 4;
+ }
+ }
+ }, CHI_TIME_AUTO_SCROLL_DELAY);
+ }
+
+ @Listen('chiTimeChange')
+ handleTimeChange(ev) {
+ const timePickerInput = document.getElementById(this._uuid) as HTMLInputElement;
+ const formatTimePeriod = (period: number) => {
+ return period.toString().length > 1 ? period.toString() : `0${period}`;
+ };
+ const hour = !(this.format === '24hr') && ev.detail.hour > 12 ? ev.detail.hour - 12 : ev.detail.hour;
+
+ timePickerInput.value = `${formatTimePeriod(hour)}:${formatTimePeriod(ev.detail.minute)}:${formatTimePeriod(ev.detail.second)} ${formatTimePeriod(ev.detail.period)}`;
+ }
+
+ render() {
+ const chiPopover = (
+
+
+ );
+
+ return (
+
+
+
+ {!this.disabled && chiPopover}
+
+ );
+ }
+}
diff --git a/src/custom-elements/src/components/time/time.scss b/src/custom-elements/src/components/time/time.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/custom-elements/src/components/time/time.tsx b/src/custom-elements/src/components/time/time.tsx
new file mode 100644
index 000000000..98073c920
--- /dev/null
+++ b/src/custom-elements/src/components/time/time.tsx
@@ -0,0 +1,443 @@
+import {
+ Component,
+ Event,
+ EventEmitter,
+ Prop,
+ Watch,
+ h, Element
+} from '@stencil/core';
+import { TIME_CLASSES } from '../../constants/classes';
+import { CHI_TIME_SCROLL_ADJUSTMENT, DatePickerFormats } from '../../constants/constants';
+
+@Component({
+ tag: 'chi-time',
+ styleUrl: 'time.scss',
+ scoped: true
+})
+export class Time {
+ /**
+ * Selected time in the time picker
+ */
+ @Prop({ reflect: true, mutable: true }) value: string;
+
+ /**
+ * Displaying seconds column
+ */
+ @Prop({ reflect: true }) displaySeconds = false;
+
+ /**
+ * To render Time Picker in 24 hours format
+ */
+ @Prop({ reflect: true }) format: DatePickerFormats = '12hr';
+
+ /**
+ * To render Minutes and Seconds columns in stepped format
+ */
+ @Prop({ reflect: true }) stepped: boolean;
+
+ /**
+ * To disable specific hours
+ */
+ @Prop({ reflect: true }) _excludedHours: string;
+
+ /**
+ * To disable specific minutes
+ */
+ @Prop({ reflect: true }) _excludedMinutes: string;
+
+ /**
+ * To disable specific seconds
+ */
+ @Prop({ reflect: true }) _excludedSeconds: string;
+
+ @Element() el: HTMLElement;
+
+ _hour: string;
+ _minute: string;
+ _second: string;
+ _period: string;
+
+ excludedHoursArray = [];
+ excludedMinutesArray = [];
+ excludedSecondsArray = [];
+
+ @Watch('excluded-hours')
+ updateExcludedHours() {
+ if (this._excludedHours) {
+ this._excludedHours.split(',').map(time => {
+ this.excludedHoursArray.push(time.trim());
+ });
+ }
+ }
+
+ @Watch('excluded-minutes')
+ updateExcludedMinutes() {
+ if (this._excludedMinutes) {
+ this._excludedMinutes.split(',').map(time => {
+ this.excludedMinutesArray.push(time.trim());
+ });
+ }
+ }
+
+ @Watch('excluded-seconds')
+ updateExcludedSeconds() {
+ if (this._excludedSeconds) {
+ this._excludedSeconds.split(',').map(time => {
+ this.excludedSecondsArray.push(time.trim());
+ });
+ }
+ }
+
+ @Watch('value')
+ timeChanged(newValue: string, oldValue: string) {
+ if (newValue !== oldValue) {
+ this.value = newValue;
+ }
+ }
+
+ // ToDo Validate Value
+ // validateTime(time: string) {
+ // return /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/.test(time);
+ // }
+
+ /**
+ * Time change value event
+ */
+ @Event({ eventName: 'chiTimeChange' }) eventChange: EventEmitter;
+
+ calculateTimePeriods() {
+ const currentTime = new Date(),
+ hours = currentTime.getHours(),
+ minutes = currentTime.getMinutes(),
+ seconds = currentTime.getSeconds();
+
+ if (!this.value) {
+ this.value = `${this.formatTimePeriod(hours)}:${this.formatTimePeriod(minutes)}:${this.formatTimePeriod(seconds)}`;
+ }
+
+ const time = this.value.split(':');
+
+ this._hour = time[0];
+ this._minute = time[1];
+ this._second = time[2] ? time[2] : '00';
+ this._period = !(this.format === '24hr') && parseInt(this._hour) < 12 ? 'am' : 'pm';
+ }
+
+ connectedCallback() {
+ this.calculateTimePeriods();
+ this.updateExcludedHours();
+ this.updateExcludedMinutes();
+ this.updateExcludedSeconds();
+ }
+
+ formatTimePeriod(period: number) {
+ return period.toString().length > 1 ? period.toString() : `0${period}`;
+ };
+
+ hours() {
+ const startHour = (this.format === '24hr') ? 24 : 12;
+ let hourToSet: string;
+ const setHour = (hour: string) => {
+ if (this.format === '24hr') {
+ if (hour === '24') {
+ hourToSet = '00';
+ } else {
+ hourToSet = hour;
+ }
+ } else {
+ if (hour === '12') {
+ if (this._period === 'am') {
+ hourToSet = '00';
+ } else {
+ hourToSet = hour;
+ }
+ } else {
+ if (this._period === 'pm') {
+ hourToSet = (parseInt(hour) + 12).toString();
+ } else {
+ hourToSet = hour;
+ }
+ }
+ }
+
+ this._hour = hour;
+ this.value = `${hourToSet}:${this._minute}:${this._second}`;
+ this.emitTimeValueEvent();
+ };
+ const hourStatus = (hour: string) => {
+ const valueHour = parseInt(this.value.split(':')[0]);
+ let hourStatus = '';
+
+ if (this._hour === hour ||
+ (!(this.format === '24hr') &&
+ this._period === 'pm' &&
+ parseInt(hour) + 12 === valueHour
+ ) ||
+ (parseInt(hour) === 12 && valueHour === 0)
+ ) {
+ hourStatus = '-active';
+ } else {
+ if (this.excludedHoursArray.includes(this.formatTimePeriod(parseInt(hour)))) {
+ hourStatus += ' -disabled';
+ }
+ }
+
+ return hourStatus;
+ };
+
+ const hoursToDisplay = [
+
setHour(startHour.toString())}>{startHour}
+ ];
+
+ Array.from(Array(startHour), (_, i) => {
+ const hour = this.formatTimePeriod(i);
+
+ if (i > 0) {
+ hoursToDisplay.push(
+
setHour(hour)}>
+ {hour}
+
+ );
+ }
+ });
+
+ return (
+
+ {hoursToDisplay}
+
+ );
+ }
+
+ minutes() {
+ const setMinute = (minute: string) => {
+ this._minute = minute;
+ this.value = `${this._hour}:${this._minute}:${this._second}`;
+ this.emitTimeValueEvent();
+ };
+ const minuteState = (minute: string) => {
+ let minuteState = '';
+
+ if (parseInt(this._minute) === parseInt(minute)) {
+ minuteState = '-active';
+ } else {
+ if (this.excludedMinutesArray.includes(minute)) {
+ minuteState += ' -disabled';
+ }
+ }
+
+ return minuteState;
+ };
+ const minutesToDisplay = [
+
setMinute('00')}>00
+ ];
+
+ Array.from(Array(60), (_, i) => {
+ const minute = this.formatTimePeriod(i);
+ const displayMinute = () => {
+ minutesToDisplay.push(
setMinute(minute)}>{minute}
);
+ };
+
+ if (i > 0) {
+ if (this.stepped) {
+ if (i % 15 === 0) {
+ displayMinute();
+ }
+ } else {
+ displayMinute();
+ }
+ }
+ });
+
+ return (
+
{
+ minutesToDisplay
+ }
+ );
+ }
+
+ seconds() {
+ const setSecond = (second: string) => {
+ this._second = second;
+ this.value = `${this._hour}:${this._minute}:${this._second}`;
+ this.emitTimeValueEvent();
+ };
+ const secondsState = (second: string) => {
+ let secondState = '';
+
+ if (parseInt(this._second) === parseInt(second)) {
+ secondState = '-active';
+ } else {
+ if (this.excludedMinutesArray.includes(second)) {
+ secondState += ' -disabled';
+ }
+ }
+
+ return secondState;
+ };
+ const secondsToDisplay = [
+
setSecond('00')}>00
+ ];
+
+ Array.from(Array(60), (_, i) => {
+ const second = this.formatTimePeriod(i);
+ const displaySecond = () => {
+ secondsToDisplay.push(
setSecond(second)}>{second}
);
+ };
+
+ if (i > 0) {
+ if (this.stepped) {
+ if (i % 10 === 0) {
+ displaySecond();
+ }
+ } else {
+ displaySecond();
+ }
+ }
+ });
+
+ if (this.displaySeconds) {
+ return (
+
{
+ secondsToDisplay
+ }
+ );
+ }
+ return;
+ }
+
+ periods() {
+ const hour = parseInt(this.value.split(':')[0]);
+ if (!(this.format === '24hr')) {
+ const periodClasses = (period: 'am' | 'pm') => {
+ let periodStatus = TIME_CLASSES.PERIOD;
+
+ if (period === this._period) {
+ periodStatus += ' -active';
+ }
+
+ return periodStatus;
+ };
+
+ const setPeriod = (period: string) => {
+ this._period = period;
+ let currentHour = hour;
+
+ if (period === 'am') {
+ if (currentHour > 12) {
+ currentHour = currentHour - 12;
+ }
+ if (currentHour === 12) {
+ currentHour = 0;
+ }
+ } else if (period === 'pm') {
+ if (currentHour < 12) {
+ currentHour = currentHour + 12;
+ }
+ if (currentHour === 12) {
+ currentHour = 12;
+ }
+ }
+
+ this.value = `${currentHour}:${this._minute}:${this._second}`;
+ this._hour = this.formatTimePeriod(currentHour);
+ this.emitTimeValueEvent();
+ };
+
+ return (
+
+
setPeriod('am')}>AM
+
+
setPeriod('pm')}>PM
+
+
+ );
+ }
+ return;
+ }
+
+ emitTimeValueEvent() {
+ this.eventChange.emit({
+ hour: this._hour,
+ minute: this._minute,
+ second: this._second,
+ period: this._period,
+ value: this.value
+ });
+ }
+
+ componentDidLoad() {
+ const hoursColumn = this.el.querySelector(`.${TIME_CLASSES.HOURS}`) as HTMLElement,
+ minutesColumn = this.el.querySelector(`.${TIME_CLASSES.MINUTES}`) as HTMLElement,
+ secondsColumn = this.el.querySelector(`.${TIME_CLASSES.SECONDS}`) as HTMLElement;
+
+ if (hoursColumn) {
+ const activeHour = hoursColumn.querySelector(`.${TIME_CLASSES.HOUR}.-active`) as HTMLElement;
+
+ if (activeHour) {
+ hoursColumn.scrollTop = activeHour.offsetTop - CHI_TIME_SCROLL_ADJUSTMENT;
+ }
+ }
+ if (minutesColumn) {
+ const activeMinute = minutesColumn.querySelector(`.${TIME_CLASSES.MINUTE}.-active`) as HTMLElement;
+
+ if (activeMinute) {
+ minutesColumn.scrollTop = activeMinute.offsetTop - CHI_TIME_SCROLL_ADJUSTMENT;
+ }
+ }
+ if (secondsColumn) {
+ const activeSecond = secondsColumn.querySelector(`.${TIME_CLASSES.SECOND}.-active`) as HTMLElement;
+
+ if (activeSecond) {
+ secondsColumn.scrollTop = activeSecond.offsetTop - CHI_TIME_SCROLL_ADJUSTMENT;
+ }
+ }
+ }
+
+ render() {
+ const hours = this.hours(),
+ minutes = this.minutes(),
+ seconds = this.seconds(),
+ periods = this.periods();
+
+ return (
+
+
+ {hours}
+ {minutes}
+ {seconds}
+ {periods}
+
+
+ );
+ }
+}
diff --git a/src/custom-elements/src/constants/classes.ts b/src/custom-elements/src/constants/classes.ts
new file mode 100644
index 000000000..fd8311959
--- /dev/null
+++ b/src/custom-elements/src/constants/classes.ts
@@ -0,0 +1,12 @@
+export const TIME_CLASSES = {
+ TIME: 'chi-time-picker',
+ CONTENT: 'chi-time-picker__content',
+ HOURS: 'chi-time-picker__hours',
+ HOUR: 'chi-time-picker__hour',
+ MINUTES: 'chi-time-picker__minutes',
+ MINUTE: 'chi-time-picker__minute',
+ SECONDS: 'chi-time-picker__seconds',
+ SECOND: 'chi-time-picker__second',
+ PERIODS: 'chi-time-picker__periods',
+ PERIOD: 'chi-time-picker__period',
+};
diff --git a/src/custom-elements/src/constants/constants.ts b/src/custom-elements/src/constants/constants.ts
index cf4648b16..97609b27f 100644
--- a/src/custom-elements/src/constants/constants.ts
+++ b/src/custom-elements/src/constants/constants.ts
@@ -35,3 +35,12 @@ export const TEXT_INPUT_TYPES = [
'week'
] as const;
export type TextInputTypes = typeof TEXT_INPUT_TYPES[number];
+
+export const DATE_PICKER_MODES = ['date', 'datetime'];
+export type DatePickerModes = typeof DATE_PICKER_MODES[number];
+
+export const CHI_TIME_AUTO_SCROLL_DELAY = 50;
+export const CHI_TIME_SCROLL_ADJUSTMENT = 28;
+
+export const TIME_PICKER_FORMATS = ['12hours', '24hours'];
+export type DatePickerFormats = typeof TIME_PICKER_FORMATS[number];
diff --git a/src/website/views/components/date-picker/_examples.pug b/src/website/views/components/date-picker/_examples.pug
index 31eeabff8..188272ff3 100644
--- a/src/website/views/components/date-picker/_examples.pug
+++ b/src/website/views/components/date-picker/_examples.pug
@@ -182,6 +182,26 @@ p.-text
#html-excluded-days-dates.chi-tabs-panel
+h3 Date Time
+p.-text
+.example.-mb--3
+ .-p--3
+ div(style="max-width: 14rem;")
+ chi-label(for='date-time')
+ | Date Time
+ chi-date-picker(id="date-time" mode="datetime")
+ .example-tabs.-pl--2
+ ul.chi-tabs#example-datetime
+ li.-active
+ a(href=`#webcomponent-datetime`) Web Component
+ li.-disabled
+ a(href=`#html-datetime`) HTML Blueprint
+ #webcomponent-datetime.chi-tabs-panel.-active
+ :code(lang="html",style="height:20rem")
+
Date
+
+ #html-datetime.chi-tabs-panel
+
h3 Calendar
p.-text
| An example of a date picker calendar not attached to any element.
@@ -569,185 +589,16 @@ h4 Date and Time
.chi-time-picker__period AM
.chi-time-picker__period PM
.example-tabs.-pl--2
- ul.chi-tabs#example-datetime
+ ul.chi-tabs#example-calendar-datetime
li.-active
- a(href=`#webcomponent-datetime`) Web Component
- li
- a(href=`#html-datetime`) HTML Blueprint
- #webcomponent-datetime.chi-tabs-panel.-active
+ a(href=`#webcomponent-calendar-datetime`) Web Component
+ li.-disabled
+ a(href=`#html-calendar-datetime`) HTML Blueprint
+ #webcomponent-calendar-datetime.chi-tabs-panel.-active
:code(lang="html")
- #html-datetime.chi-tabs-panel
- .chi-tab__description
- span.-text--grey
- | This HTML Blueprint requires JavaScript.
- | You may use your own solution, or use Chi's vanilla JavaScript solution,
- |
Chi.js .
- br
- br
- | Use the classes
-month-starts-on-sun,
- |
-month-starts-on-mon,
-month-starts-on-tue,
-month-starts-on-wed,
- |
-month-starts-on-thu,
-month-starts-on-fri and
-month-starts-on-sat to
- | locate the first day in the correct cell.
- br
- | Use the classes
-week-starts-on-sun or
-week-starts-on-mon to fit the week definition
- | of the desired locale.
- br
- | Use the class
-today for the current date
- :code(lang="html")
-
-
-
-
-
- November 2018
-
-
-
-
-
-
- S
-
-
- M
-
-
- T
-
-
- W
-
-
- T
-
-
- F
-
-
- S
-
-
-
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
-
-
-
-
-
12
-
01
-
02
-
03
-
04
-
05
-
06
-
07
-
08
-
09
-
10
-
11
-
-
-
00
-
01
-
02
-
03
-
04
-
05
-
06
-
07
-
08
-
09
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
-
-
-
+ #html-calendar-datetime.chi-tabs-panel
script.
document.addEventListener(
'DOMContentLoaded',
diff --git a/src/website/views/components/time-picker/_examples.pug b/src/website/views/components/time-picker/_examples.pug
index 261dbdde8..ed67648ed 100644
--- a/src/website/views/components/time-picker/_examples.pug
+++ b/src/website/views/components/time-picker/_examples.pug
@@ -5,37 +5,19 @@ p.-text
.example.-mb--3
.-p--3
div.chi-form__item(style="max-width: 14rem;")
- label.chi-label(for='unique-id-ba1')
- | Time
- div.chi-input__wrapper.-icon--right
- input.chi-input(type="time" id="unique-id-ba1")
- i.chi-icon.icon-circle-clock-outline.-icon--muted
+ chi-label(for="time-picker-base") Label
+ chi-time-picker(id="time-picker-base")
.example-tabs.-pl--2
ul.chi-tabs#example-with-label
li.-active
a(href=`#webcomponent-with-label`) Web Component
- li
+ li.-disabled
a(href=`#html-with-label`) HTML Blueprint
#webcomponent-with-label.chi-tabs-panel.-active
:code(lang="html",style="height:20rem")
-
Time
-
+
Label
+
#html-with-label.chi-tabs-panel
- .chi-tab__description
- span.-text--grey
- | This HTML Blueprint requires JavaScript.
- | You may use your own solution, or use Chi's vanilla JavaScript solution,
- |
Chi.js .
- :code(lang="html")
-
-
-
h3 Disabled
p.-text
@@ -45,108 +27,57 @@ p.-text
.example.-mb--3(style="z-index: 1;")
.-p--3
div.chi-form__item(style="max-width: 14rem;")
- label.chi-label(for='unique-id-di1')
- | Time
- div.chi-input__wrapper.-icon--right
- input.chi-input(type="time" id="unique-id-di1" disabled)
- i.chi-icon.icon-circle-clock-outline.-icon--muted
+ chi-label(for="time-picker-disabled") Label
+ chi-time-picker(id="time-picker-disabled" disabled)
.example-tabs.-pl--2
ul.chi-tabs#example-disabled
li.-active
a(href=`#webcomponent-disabled`) Web Component
- li
+ li.-disabled
a(href=`#html-disabled`) HTML Blueprint
#webcomponent-disabled.chi-tabs-panel.-active
:code(lang="html")
-
Time
-
+
Label
+
#html-disabled.chi-tabs-panel
- .chi-tab__description
- span.-text--grey
- | This HTML Blueprint requires JavaScript.
- | You may use your own solution, or use Chi's vanilla JavaScript solution,
- |
Chi.js .
- :code(lang="html")
-
-
-
-h3 Value, min and max options
+h3 Value option
.example.-mb--3
.-p--3
div.chi-form__item(style="max-width: 14rem;")
- label.chi-label(for='unique-id-va1')
- | Time
- div.chi-input__wrapper.-icon--right
- input.chi-input(type="time" id="unique-id-va1")
- i.chi-icon.icon-circle-clock-outline.-icon--muted
+ chi-label(for='unique-id-va1') Time
+ chi-time-picker#unique-id-va1(value='09:00')
.example-tabs.-pl--2
ul.chi-tabs#example-min-max-value
li.-active
a(href=`#webcomponent-min-max-value`) Web Component
- li
+ li.-disabled
a(href=`#html-min-max-value`) HTML Blueprint
#webcomponent-min-max-value.chi-tabs-panel.-active
:code(lang="html")
Time
-
+
#html-min-max-value.chi-tabs-panel
- .chi-tab__description
- span.-text--grey
- | This HTML Blueprint requires JavaScript.
- | You may use your own solution, or use Chi's vanilla JavaScript solution,
- |
Chi.js .
- :code(lang="html")
-
-
-
-
-
-
-
-h3 Excluded times
-p.-text
- | Specify which times to disable by using the
excluded-times attribute.
-.example.-mb--3
- .-p--3
- div.chi-form__item(style="max-width: 14rem;")
- label.chi-label(for='unique-id-et1')
- | Time
- div.chi-input__wrapper.-icon--right
- input.chi-input(type="time" id="unique-id-et1")
- i.chi-icon.icon-circle-clock-outline.-icon--muted
- .example-tabs.-pl--2
- ul.chi-tabs#example-excluded-times
- li.-active
- a(href=`#webcomponent-excluded-times`) Web Component
- li.-disabled
- a(href=`#html-excluded-times`) HTML Blueprint
- #webcomponent-excluded-times.chi-tabs-panel.-active
- :code(lang="html",style="height:20rem")
-
Time
-
- #html-excluded-times.chi-tabs-panel
+//h3 Excluded hours, minutes and seconds
+//p.-text
+// | Specify which times to exclude by using the
excluded-hours attribute to exclude hours,
excluded-minutes to exclude minutes, and
excluded-seconds to exclude seconds.
+//.example.-mb--3
+// .-p--3
+// div.chi-form__item(style="max-width: 14rem;")
+// chi-label(for="time-picker-excluded") Label
+// chi-time-picker(id="time-picker-excluded", excluded-hours="14, 15", excluded-minutes="00, 01, 02, 03, 04, 05", excluded-seconds="00, 01, 02, 03, 04, 05", display-seconds)
+// .example-tabs.-pl--2
+// ul.chi-tabs#example-excluded-times
+// li.-active
+// a(href=`#webcomponent-excluded-times`) Web Component
+// li.-disabled
+// a(href=`#html-excluded-times`) HTML Blueprint
+// #webcomponent-excluded-times.chi-tabs-panel.-active
+// :code(lang="html",style="height:20rem")
+//
Time
+//
+// #html-excluded-times.chi-tabs-panel
h3 Time
p.-text
@@ -154,626 +85,77 @@ p.-text
h4 Base
.example.-mb--3
.-p--3
- .chi-time-picker
- .chi-time-picker__content
- .chi-time-picker__hours
- .chi-time-picker__hour 12
- .chi-time-picker__hour 01
- .chi-time-picker__hour 02
- .chi-time-picker__hour 03
- .chi-time-picker__hour 04
- .chi-time-picker__hour 05
- .chi-time-picker__hour 06
- .chi-time-picker__hour 07
- .chi-time-picker__hour 08
- .chi-time-picker__hour 09
- .chi-time-picker__hour 10
- .chi-time-picker__hour 11
- .chi-time-picker__minutes
- .chi-time-picker__minute 00
- .chi-time-picker__minute 01
- .chi-time-picker__minute 02
- .chi-time-picker__minute 03
- .chi-time-picker__minute 04
- .chi-time-picker__minute 05
- .chi-time-picker__minute 06
- .chi-time-picker__minute 07
- .chi-time-picker__minute 08
- .chi-time-picker__minute 09
- .chi-time-picker__minute 10
- .chi-time-picker__minute 11
- .chi-time-picker__minute 12
- .chi-time-picker__minute 13
- .chi-time-picker__minute 14
- .chi-time-picker__minute 15
- .chi-time-picker__minute 16
- .chi-time-picker__minute 17
- .chi-time-picker__minute 18
- .chi-time-picker__minute 19
- .chi-time-picker__minute 20
- .chi-time-picker__minute 21
- .chi-time-picker__minute 22
- .chi-time-picker__minute 23
- .chi-time-picker__minute 24
- .chi-time-picker__minute 25
- .chi-time-picker__minute 26
- .chi-time-picker__minute 27
- .chi-time-picker__minute 28
- .chi-time-picker__minute 29
- .chi-time-picker__minute 30
- .chi-time-picker__minute 31
- .chi-time-picker__minute 32
- .chi-time-picker__minute 33
- .chi-time-picker__minute 34
- .chi-time-picker__minute 35
- .chi-time-picker__minute 36
- .chi-time-picker__minute 37
- .chi-time-picker__minute 38
- .chi-time-picker__minute 39
- .chi-time-picker__minute 40
- .chi-time-picker__minute 41
- .chi-time-picker__minute 42
- .chi-time-picker__minute 43
- .chi-time-picker__minute 44
- .chi-time-picker__minute 45
- .chi-time-picker__minute 46
- .chi-time-picker__minute 47
- .chi-time-picker__minute 48
- .chi-time-picker__minute 49
- .chi-time-picker__minute 50
- .chi-time-picker__minute 51
- .chi-time-picker__minute 52
- .chi-time-picker__minute 53
- .chi-time-picker__minute 54
- .chi-time-picker__minute 55
- .chi-time-picker__minute 56
- .chi-time-picker__minute 57
- .chi-time-picker__minute 58
- .chi-time-picker__minute 59
- .chi-time-picker__periods
- .chi-time-picker__period AM
- .chi-time-picker__period PM
+ chi-time
.example-tabs.-pl--2
ul.chi-tabs#example-time
li.-active
a(href=`#webcomponent-time`) Web Component
- li
+ li.-disabled
a(href=`#html-time`) HTML Blueprint
#webcomponent-time.chi-tabs-panel.-active
:code(lang="html")
#html-time.chi-tabs-panel
- .chi-tab__description
- span.-text--grey
- | This HTML Blueprint requires JavaScript.
- | You may use your own solution, or use Chi's vanilla JavaScript solution,
- |
Chi.js .
- :code(lang="html")
h4 Active
.example.-mb--3
.-p--3
- .chi-time-picker
- .chi-time-picker__content
- .chi-time-picker__hours
- .chi-time-picker__hour.-active 12
- .chi-time-picker__hour 01
- .chi-time-picker__hour 02
- .chi-time-picker__hour 03
- .chi-time-picker__hour 04
- .chi-time-picker__hour 05
- .chi-time-picker__hour 06
- .chi-time-picker__hour 07
- .chi-time-picker__hour 08
- .chi-time-picker__hour 09
- .chi-time-picker__hour 10
- .chi-time-picker__hour 11
- .chi-time-picker__minutes
- .chi-time-picker__minute.-active 00
- .chi-time-picker__minute 01
- .chi-time-picker__minute 02
- .chi-time-picker__minute 03
- .chi-time-picker__minute 04
- .chi-time-picker__minute 05
- .chi-time-picker__minute 06
- .chi-time-picker__minute 07
- .chi-time-picker__minute 08
- .chi-time-picker__minute 09
- .chi-time-picker__minute 10
- .chi-time-picker__minute 11
- .chi-time-picker__minute 12
- .chi-time-picker__minute 13
- .chi-time-picker__minute 14
- .chi-time-picker__minute 15
- .chi-time-picker__minute 16
- .chi-time-picker__minute 17
- .chi-time-picker__minute 18
- .chi-time-picker__minute 19
- .chi-time-picker__minute 20
- .chi-time-picker__minute 21
- .chi-time-picker__minute 22
- .chi-time-picker__minute 23
- .chi-time-picker__minute 24
- .chi-time-picker__minute 25
- .chi-time-picker__minute 26
- .chi-time-picker__minute 27
- .chi-time-picker__minute 28
- .chi-time-picker__minute 29
- .chi-time-picker__minute 30
- .chi-time-picker__minute 31
- .chi-time-picker__minute 32
- .chi-time-picker__minute 33
- .chi-time-picker__minute 34
- .chi-time-picker__minute 35
- .chi-time-picker__minute 36
- .chi-time-picker__minute 37
- .chi-time-picker__minute 38
- .chi-time-picker__minute 39
- .chi-time-picker__minute 40
- .chi-time-picker__minute 41
- .chi-time-picker__minute 42
- .chi-time-picker__minute 43
- .chi-time-picker__minute 44
- .chi-time-picker__minute 45
- .chi-time-picker__minute 46
- .chi-time-picker__minute 47
- .chi-time-picker__minute 48
- .chi-time-picker__minute 49
- .chi-time-picker__minute 50
- .chi-time-picker__minute 51
- .chi-time-picker__minute 52
- .chi-time-picker__minute 53
- .chi-time-picker__minute 54
- .chi-time-picker__minute 55
- .chi-time-picker__minute 56
- .chi-time-picker__minute 57
- .chi-time-picker__minute 58
- .chi-time-picker__minute 59
- .chi-time-picker__periods
- .chi-time-picker__period.-active AM
- .chi-time-picker__period PM
+ chi-time(value="14:00")
.example-tabs.-pl--2
ul.chi-tabs#example-active
li.-active
a(href=`#webcomponent-active`) Web Component
- li
+ li.-disabled
a(href=`#html-active`) HTML Blueprint
#webcomponent-active.chi-tabs-panel.-active
:code(lang="html")
-
+
#html-active.chi-tabs-panel
- .chi-tab__description
- span.-text--grey
- | This HTML Blueprint requires JavaScript.
- | You may use your own solution, or use Chi's vanilla JavaScript solution,
- |
Chi.js .
- :code(lang="html")
-
-h4 Min and Max
-.example.-mb--3
- .-p--3
- .chi-time-picker
- .chi-time-picker__content
- .chi-time-picker__hours
- .chi-time-picker__hour.-active 12
- .chi-time-picker__hour 01
- .chi-time-picker__hour 02
- .chi-time-picker__hour.-disabled 03
- .chi-time-picker__hour.-disabled 04
- .chi-time-picker__hour.-disabled 05
- .chi-time-picker__hour.-disabled 06
- .chi-time-picker__hour.-disabled 07
- .chi-time-picker__hour.-disabled 08
- .chi-time-picker__hour.-disabled 09
- .chi-time-picker__hour.-disabled 10
- .chi-time-picker__hour.-disabled 11
- .chi-time-picker__minutes
- .chi-time-picker__minute.-active 00
- .chi-time-picker__minute 01
- .chi-time-picker__minute 02
- .chi-time-picker__minute 03
- .chi-time-picker__minute 04
- .chi-time-picker__minute 05
- .chi-time-picker__minute 06
- .chi-time-picker__minute 07
- .chi-time-picker__minute 08
- .chi-time-picker__minute 09
- .chi-time-picker__minute 10
- .chi-time-picker__minute 11
- .chi-time-picker__minute 12
- .chi-time-picker__minute 13
- .chi-time-picker__minute 14
- .chi-time-picker__minute 15
- .chi-time-picker__minute 16
- .chi-time-picker__minute 17
- .chi-time-picker__minute 18
- .chi-time-picker__minute 19
- .chi-time-picker__minute 20
- .chi-time-picker__minute 21
- .chi-time-picker__minute 22
- .chi-time-picker__minute 23
- .chi-time-picker__minute 24
- .chi-time-picker__minute 25
- .chi-time-picker__minute 26
- .chi-time-picker__minute 27
- .chi-time-picker__minute 28
- .chi-time-picker__minute 29
- .chi-time-picker__minute 30
- .chi-time-picker__minute 31
- .chi-time-picker__minute 32
- .chi-time-picker__minute 33
- .chi-time-picker__minute 34
- .chi-time-picker__minute 35
- .chi-time-picker__minute 36
- .chi-time-picker__minute 37
- .chi-time-picker__minute 38
- .chi-time-picker__minute 39
- .chi-time-picker__minute 40
- .chi-time-picker__minute 41
- .chi-time-picker__minute 42
- .chi-time-picker__minute 43
- .chi-time-picker__minute 44
- .chi-time-picker__minute 45
- .chi-time-picker__minute 46
- .chi-time-picker__minute 47
- .chi-time-picker__minute 48
- .chi-time-picker__minute 49
- .chi-time-picker__minute 50
- .chi-time-picker__minute 51
- .chi-time-picker__minute 52
- .chi-time-picker__minute 53
- .chi-time-picker__minute 54
- .chi-time-picker__minute 55
- .chi-time-picker__minute 56
- .chi-time-picker__minute 57
- .chi-time-picker__minute 58
- .chi-time-picker__minute 59
- .chi-time-picker__periods
- .chi-time-picker__period.-active AM
- .chi-time-picker__period.-disabled PM
- .example-tabs.-pl--2
- ul.chi-tabs#example-min-max
- li.-active
- a(href=`#webcomponent-min-max`) Web Component
- li
- a(href=`#html-min-max`) HTML Blueprint
- #webcomponent-min-max.chi-tabs-panel.-active
- :code(lang="html")
-
- #html-min-max.chi-tabs-panel
- .chi-tab__description
- span.-text--grey
- | This HTML Blueprint requires JavaScript.
- | You may use your own solution, or use Chi's vanilla JavaScript solution,
- |
Chi.js .
- :code(lang="html")
h4 Seconds
.example.-mb--3
.-p--3
- .chi-time-picker
- .chi-time-picker__content
- .chi-time-picker__hours
- .chi-time-picker__hour 12
- .chi-time-picker__hour 01
- .chi-time-picker__hour 02
- .chi-time-picker__hour 03
- .chi-time-picker__hour 04
- .chi-time-picker__hour 05
- .chi-time-picker__hour 06
- .chi-time-picker__hour 07
- .chi-time-picker__hour 08
- .chi-time-picker__hour 09
- .chi-time-picker__hour 10
- .chi-time-picker__hour 11
- .chi-time-picker__minutes
- .chi-time-picker__minute 00
- .chi-time-picker__minute 01
- .chi-time-picker__minute 02
- .chi-time-picker__minute 03
- .chi-time-picker__minute 04
- .chi-time-picker__minute 05
- .chi-time-picker__minute 06
- .chi-time-picker__minute 07
- .chi-time-picker__minute 08
- .chi-time-picker__minute 09
- .chi-time-picker__minute 10
- .chi-time-picker__minute 11
- .chi-time-picker__minute 12
- .chi-time-picker__minute 13
- .chi-time-picker__minute 14
- .chi-time-picker__minute 15
- .chi-time-picker__minute 16
- .chi-time-picker__minute 17
- .chi-time-picker__minute 18
- .chi-time-picker__minute 19
- .chi-time-picker__minute 20
- .chi-time-picker__minute 21
- .chi-time-picker__minute 22
- .chi-time-picker__minute 23
- .chi-time-picker__minute 24
- .chi-time-picker__minute 25
- .chi-time-picker__minute 26
- .chi-time-picker__minute 27
- .chi-time-picker__minute 28
- .chi-time-picker__minute 29
- .chi-time-picker__minute 30
- .chi-time-picker__minute 31
- .chi-time-picker__minute 32
- .chi-time-picker__minute 33
- .chi-time-picker__minute 34
- .chi-time-picker__minute 35
- .chi-time-picker__minute 36
- .chi-time-picker__minute 37
- .chi-time-picker__minute 38
- .chi-time-picker__minute 39
- .chi-time-picker__minute 40
- .chi-time-picker__minute 41
- .chi-time-picker__minute 42
- .chi-time-picker__minute 43
- .chi-time-picker__minute 44
- .chi-time-picker__minute 45
- .chi-time-picker__minute 46
- .chi-time-picker__minute 47
- .chi-time-picker__minute 48
- .chi-time-picker__minute 49
- .chi-time-picker__minute 50
- .chi-time-picker__minute 51
- .chi-time-picker__minute 52
- .chi-time-picker__minute 53
- .chi-time-picker__minute 54
- .chi-time-picker__minute 55
- .chi-time-picker__minute 56
- .chi-time-picker__minute 57
- .chi-time-picker__minute 58
- .chi-time-picker__minute 59
- .chi-time-picker__seconds
- .chi-time-picker__second 00
- .chi-time-picker__second 01
- .chi-time-picker__second 02
- .chi-time-picker__second 03
- .chi-time-picker__second 04
- .chi-time-picker__second 05
- .chi-time-picker__second 06
- .chi-time-picker__second 07
- .chi-time-picker__second 08
- .chi-time-picker__second 09
- .chi-time-picker__second 10
- .chi-time-picker__second 11
- .chi-time-picker__second 12
- .chi-time-picker__second 13
- .chi-time-picker__second 14
- .chi-time-picker__second 15
- .chi-time-picker__second 16
- .chi-time-picker__second 17
- .chi-time-picker__second 18
- .chi-time-picker__second 19
- .chi-time-picker__second 20
- .chi-time-picker__second 21
- .chi-time-picker__second 22
- .chi-time-picker__second 23
- .chi-time-picker__second 24
- .chi-time-picker__second 25
- .chi-time-picker__second 26
- .chi-time-picker__second 27
- .chi-time-picker__second 28
- .chi-time-picker__second 29
- .chi-time-picker__second 30
- .chi-time-picker__second 31
- .chi-time-picker__second 32
- .chi-time-picker__second 33
- .chi-time-picker__second 34
- .chi-time-picker__second 35
- .chi-time-picker__second 36
- .chi-time-picker__second 37
- .chi-time-picker__second 38
- .chi-time-picker__second 39
- .chi-time-picker__second 40
- .chi-time-picker__second 41
- .chi-time-picker__second 42
- .chi-time-picker__second 43
- .chi-time-picker__second 44
- .chi-time-picker__second 45
- .chi-time-picker__second 46
- .chi-time-picker__second 47
- .chi-time-picker__second 48
- .chi-time-picker__second 49
- .chi-time-picker__second 50
- .chi-time-picker__second 51
- .chi-time-picker__second 52
- .chi-time-picker__second 53
- .chi-time-picker__second 54
- .chi-time-picker__second 55
- .chi-time-picker__second 56
- .chi-time-picker__second 57
- .chi-time-picker__second 58
- .chi-time-picker__second 59
- .chi-time-picker__periods
- .chi-time-picker__period AM
- .chi-time-picker__period PM
+ chi-time(display-seconds)
.example-tabs.-pl--2
ul.chi-tabs#example-seconds
li.-active
a(href=`#webcomponent-seconds`) Web Component
- li
+ li.-disabled
a(href=`#html-seconds`) HTML Blueprint
- #webcomponent.chi-tabs-panel.-active
- :code(lang="html")
-
- #html.chi-tabs-panel
- .chi-tab__description
- span.-text--grey
- | This HTML Blueprint requires JavaScript.
- | You may use your own solution, or use Chi's vanilla JavaScript solution,
- |
Chi.js .
+ #webcomponent-seconds.chi-tabs-panel.-active
:code(lang="html")
+
+ #html-seconds.chi-tabs-panel
h4 24-hour format
.example.-mb--3
.-p--3
- .chi-time-picker
- .chi-time-picker__content
- .chi-time-picker__hours
- .chi-time-picker__hour 00
- .chi-time-picker__hour 01
- .chi-time-picker__hour 02
- .chi-time-picker__hour 03
- .chi-time-picker__hour 04
- .chi-time-picker__hour 05
- .chi-time-picker__hour 06
- .chi-time-picker__hour 07
- .chi-time-picker__hour 08
- .chi-time-picker__hour 09
- .chi-time-picker__hour 10
- .chi-time-picker__hour 11
- .chi-time-picker__hour 12
- .chi-time-picker__hour 13
- .chi-time-picker__hour 14
- .chi-time-picker__hour 15
- .chi-time-picker__hour 16
- .chi-time-picker__hour 17
- .chi-time-picker__hour 18
- .chi-time-picker__hour 19
- .chi-time-picker__hour 20
- .chi-time-picker__hour 21
- .chi-time-picker__hour 22
- .chi-time-picker__hour 23
- .chi-time-picker__minutes
- .chi-time-picker__minute 00
- .chi-time-picker__minute 01
- .chi-time-picker__minute 02
- .chi-time-picker__minute 03
- .chi-time-picker__minute 04
- .chi-time-picker__minute 05
- .chi-time-picker__minute 06
- .chi-time-picker__minute 07
- .chi-time-picker__minute 08
- .chi-time-picker__minute 09
- .chi-time-picker__minute 10
- .chi-time-picker__minute 11
- .chi-time-picker__minute 12
- .chi-time-picker__minute 13
- .chi-time-picker__minute 14
- .chi-time-picker__minute 15
- .chi-time-picker__minute 16
- .chi-time-picker__minute 17
- .chi-time-picker__minute 18
- .chi-time-picker__minute 19
- .chi-time-picker__minute 20
- .chi-time-picker__minute 21
- .chi-time-picker__minute 22
- .chi-time-picker__minute 23
- .chi-time-picker__minute 24
- .chi-time-picker__minute 25
- .chi-time-picker__minute 26
- .chi-time-picker__minute 27
- .chi-time-picker__minute 28
- .chi-time-picker__minute 29
- .chi-time-picker__minute 30
- .chi-time-picker__minute 31
- .chi-time-picker__minute 32
- .chi-time-picker__minute 33
- .chi-time-picker__minute 34
- .chi-time-picker__minute 35
- .chi-time-picker__minute 36
- .chi-time-picker__minute 37
- .chi-time-picker__minute 38
- .chi-time-picker__minute 39
- .chi-time-picker__minute 40
- .chi-time-picker__minute 41
- .chi-time-picker__minute 42
- .chi-time-picker__minute 43
- .chi-time-picker__minute 44
- .chi-time-picker__minute 45
- .chi-time-picker__minute 46
- .chi-time-picker__minute 47
- .chi-time-picker__minute 48
- .chi-time-picker__minute 49
- .chi-time-picker__minute 50
- .chi-time-picker__minute 51
- .chi-time-picker__minute 52
- .chi-time-picker__minute 53
- .chi-time-picker__minute 54
- .chi-time-picker__minute 55
- .chi-time-picker__minute 56
- .chi-time-picker__minute 57
- .chi-time-picker__minute 58
- .chi-time-picker__minute 59
+ chi-time(format='24hr')
.example-tabs.-pl--2
ul.chi-tabs#example-24hour
li.-active
a(href=`#webcomponent-24hour`) Web Component
- li
+ li.-disabled
a(href=`#html-24hour`) HTML Blueprint
#webcomponent-24hour.chi-tabs-panel.-active
:code(lang="html")
-
+
#html-24hour.chi-tabs-panel
- .chi-tab__description
- span.-text--grey
- | This HTML Blueprint requires JavaScript.
- | You may use your own solution, or use Chi's vanilla JavaScript solution,
- |
Chi.js .
- :code(lang="html")
h4 Step
.example.-mb--3
.-p--3
- .chi-time-picker
- .chi-time-picker__content
- .chi-time-picker__hours
- .chi-time-picker__hour 00
- .chi-time-picker__hour 01
- .chi-time-picker__hour 02
- .chi-time-picker__hour 03
- .chi-time-picker__hour 04
- .chi-time-picker__hour 05
- .chi-time-picker__hour 06
- .chi-time-picker__hour 07
- .chi-time-picker__hour 08
- .chi-time-picker__hour 09
- .chi-time-picker__hour 10
- .chi-time-picker__hour 11
- .chi-time-picker__hour 12
- .chi-time-picker__hour 13
- .chi-time-picker__hour 14
- .chi-time-picker__hour 15
- .chi-time-picker__hour 16
- .chi-time-picker__hour 17
- .chi-time-picker__hour 18
- .chi-time-picker__hour 19
- .chi-time-picker__hour 20
- .chi-time-picker__hour 21
- .chi-time-picker__hour 22
- .chi-time-picker__hour 23
- .chi-time-picker__minutes
- .chi-time-picker__minute 00
- .chi-time-picker__minute 15
- .chi-time-picker__minute 30
- .chi-time-picker__minute 45
- .chi-time-picker__seconds
- .chi-time-picker__second 00
- .chi-time-picker__second 10
- .chi-time-picker__second 20
- .chi-time-picker__second 30
- .chi-time-picker__second 40
- .chi-time-picker__second 50
+ chi-time(stepped, display-seconds)
.example-tabs.-pl--2
ul.chi-tabs#example-step
li.-active
a(href=`#webcomponent-step`) Web Component
- li
+ li.-disabled
a(href=`#html-step`) HTML Blueprint
#webcomponent-step.chi-tabs-panel.-active
:code(lang="html")
-
+
#html-step.chi-tabs-panel
- .chi-tab__description
- span.-text--grey
- | This HTML Blueprint requires JavaScript.
- | You may use your own solution, or use Chi's vanilla JavaScript solution,
- |
Chi.js .
- :code(lang="html")
script.
document.addEventListener(
diff --git a/src/website/views/components/time-picker/_properties.pug b/src/website/views/components/time-picker/_properties.pug
index 0e0e9a578..104efbc5f 100644
--- a/src/website/views/components/time-picker/_properties.pug
+++ b/src/website/views/components/time-picker/_properties.pug
@@ -1,6 +1,6 @@
-h2 Web Component
-h3 Properties
-.chi-card.-align--center.-empty
- .chi-card__content
- .chi-card__caption
- | Web component coming soon
+h2 chi-time-picker
+:stencilDoc(name='chi-time-picker')
+.chi-divider.-my--5
+h2 chi-time
+:stencilDoc(name='chi-time')
+.chi-divider.-my--5
diff --git a/src/website/views/getting-started/whats-new.pug b/src/website/views/getting-started/whats-new.pug
index c7776a4ff..83e488199 100644
--- a/src/website/views/getting-started/whats-new.pug
+++ b/src/website/views/getting-started/whats-new.pug
@@ -13,6 +13,7 @@ script(nomodule='' src='../../js/ce/ux-chi-ce/ux-chi-ce.js')
h4.-text--h4.-text--bold Added
ul.-text.-pl--2
li Added: Time picker and Datetime picker components to allow users to enter a time through text input or choose a time from a picker.
+ li Added: Date Picker web component now supports
resetDate method.
h4.-text--h4.-text--bold Changed
ul.-text.-pl--2
li Changed: Modal components with theme
-portal now align buttons in
chi-modal__footer to the right (Chi's default) instead of center.