diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss
index 530b397c9144e..9412de832e3ea 100644
--- a/packages/components/src/date-time/style.scss
+++ b/packages/components/src/date-time/style.scss
@@ -152,12 +152,6 @@
border-radius: 0 $radius-round-rectangle $radius-round-rectangle 0 !important;
}
}
-
- &.is-24-hour {
- .components-datetime__time-field-day {
- order: 0 !important;
- }
- }
}
.components-datetime__time-legend {
diff --git a/packages/components/src/date-time/test/__snapshots__/time.js.snap b/packages/components/src/date-time/test/__snapshots__/time.js.snap
new file mode 100644
index 0000000000000..d67e11da54846
--- /dev/null
+++ b/packages/components/src/date-time/test/__snapshots__/time.js.snap
@@ -0,0 +1,689 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TimePicker matches the snapshot when the is12hour prop is false 1`] = `
+<div
+ className="components-datetime__time"
+>
+ <fieldset>
+ <legend
+ className="components-datetime__time-legend invisible"
+ >
+ Date
+ </legend>
+ <div
+ className="components-datetime__time-wrapper"
+ >
+ <div
+ className="components-datetime__time-field components-datetime__time-field-month"
+ key="render-month"
+ >
+ <select
+ aria-label="Month"
+ className="components-datetime__time-field-month-select"
+ onBlur={[Function]}
+ onChange={[Function]}
+ value="10"
+ >
+ <option
+ value="01"
+ >
+ January
+ </option>
+ <option
+ value="02"
+ >
+ February
+ </option>
+ <option
+ value="03"
+ >
+ March
+ </option>
+ <option
+ value="04"
+ >
+ April
+ </option>
+ <option
+ value="05"
+ >
+ May
+ </option>
+ <option
+ value="06"
+ >
+ June
+ </option>
+ <option
+ value="07"
+ >
+ July
+ </option>
+ <option
+ value="08"
+ >
+ August
+ </option>
+ <option
+ value="09"
+ >
+ September
+ </option>
+ <option
+ value="10"
+ >
+ October
+ </option>
+ <option
+ value="11"
+ >
+ November
+ </option>
+ <option
+ value="12"
+ >
+ December
+ </option>
+ </select>
+ </div>
+ <div
+ className="components-datetime__time-field components-datetime__time-field-day"
+ key="render-day"
+ >
+ <input
+ aria-label="Day"
+ className="components-datetime__time-field-day-input"
+ min={1}
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="18"
+ />
+ </div>
+ <div
+ className="components-datetime__time-field components-datetime__time-field-year"
+ >
+ <input
+ aria-label="Year"
+ className="components-datetime__time-field-year-input"
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="1986"
+ />
+ </div>
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend
+ className="components-datetime__time-legend invisible"
+ >
+ Time
+ </legend>
+ <div
+ className="components-datetime__time-wrapper"
+ >
+ <div
+ className="components-datetime__time-field components-datetime__time-field-time"
+ >
+ <input
+ aria-label="Hours"
+ className="components-datetime__time-field-hours-input"
+ max={23}
+ min={0}
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="23"
+ />
+ <span
+ aria-hidden="true"
+ className="components-datetime__time-separator"
+ >
+ :
+ </span>
+ <input
+ aria-label="Minutes"
+ className="components-datetime__time-field-minutes-input"
+ max={59}
+ min={0}
+ onBlur={[Function]}
+ onChange={[Function]}
+ type="number"
+ value="00"
+ />
+ </div>
+ </div>
+ </fieldset>
+</div>
+`;
+
+exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`] = `
+<div
+ className="components-datetime__time"
+>
+ <fieldset>
+ <legend
+ className="components-datetime__time-legend invisible"
+ >
+ Date
+ </legend>
+ <div
+ className="components-datetime__time-wrapper"
+ >
+ <div
+ className="components-datetime__time-field components-datetime__time-field-day"
+ key="render-day"
+ >
+ <input
+ aria-label="Day"
+ className="components-datetime__time-field-day-input"
+ min={1}
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="18"
+ />
+ </div>
+ <div
+ className="components-datetime__time-field components-datetime__time-field-month"
+ key="render-month"
+ >
+ <select
+ aria-label="Month"
+ className="components-datetime__time-field-month-select"
+ onBlur={[Function]}
+ onChange={[Function]}
+ value="10"
+ >
+ <option
+ value="01"
+ >
+ January
+ </option>
+ <option
+ value="02"
+ >
+ February
+ </option>
+ <option
+ value="03"
+ >
+ March
+ </option>
+ <option
+ value="04"
+ >
+ April
+ </option>
+ <option
+ value="05"
+ >
+ May
+ </option>
+ <option
+ value="06"
+ >
+ June
+ </option>
+ <option
+ value="07"
+ >
+ July
+ </option>
+ <option
+ value="08"
+ >
+ August
+ </option>
+ <option
+ value="09"
+ >
+ September
+ </option>
+ <option
+ value="10"
+ >
+ October
+ </option>
+ <option
+ value="11"
+ >
+ November
+ </option>
+ <option
+ value="12"
+ >
+ December
+ </option>
+ </select>
+ </div>
+ <div
+ className="components-datetime__time-field components-datetime__time-field-year"
+ >
+ <input
+ aria-label="Year"
+ className="components-datetime__time-field-year-input"
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="1986"
+ />
+ </div>
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend
+ className="components-datetime__time-legend invisible"
+ >
+ Time
+ </legend>
+ <div
+ className="components-datetime__time-wrapper"
+ >
+ <div
+ className="components-datetime__time-field components-datetime__time-field-time"
+ >
+ <input
+ aria-label="Hours"
+ className="components-datetime__time-field-hours-input"
+ max={12}
+ min={1}
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="11"
+ />
+ <span
+ aria-hidden="true"
+ className="components-datetime__time-separator"
+ >
+ :
+ </span>
+ <input
+ aria-label="Minutes"
+ className="components-datetime__time-field-minutes-input"
+ max={59}
+ min={0}
+ onBlur={[Function]}
+ onChange={[Function]}
+ type="number"
+ value="00"
+ />
+ </div>
+ <div
+ className="components-datetime__time-field components-datetime__time-field-am-pm"
+ >
+ <ForwardRef(Button)
+ aria-pressed={false}
+ className="components-datetime__time-am-button"
+ isDefault={true}
+ isToggled={false}
+ onClick={[Function]}
+ >
+ AM
+ </ForwardRef(Button)>
+ <ForwardRef(Button)
+ aria-pressed={true}
+ className="components-datetime__time-pm-button"
+ isDefault={true}
+ isToggled={true}
+ onClick={[Function]}
+ >
+ PM
+ </ForwardRef(Button)>
+ </div>
+ </div>
+ </fieldset>
+</div>
+`;
+
+exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = `
+<div
+ className="components-datetime__time"
+>
+ <fieldset>
+ <legend
+ className="components-datetime__time-legend invisible"
+ >
+ Date
+ </legend>
+ <div
+ className="components-datetime__time-wrapper"
+ >
+ <div
+ className="components-datetime__time-field components-datetime__time-field-day"
+ key="render-day"
+ >
+ <input
+ aria-label="Day"
+ className="components-datetime__time-field-day-input"
+ min={1}
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="18"
+ />
+ </div>
+ <div
+ className="components-datetime__time-field components-datetime__time-field-month"
+ key="render-month"
+ >
+ <select
+ aria-label="Month"
+ className="components-datetime__time-field-month-select"
+ onBlur={[Function]}
+ onChange={[Function]}
+ value="10"
+ >
+ <option
+ value="01"
+ >
+ January
+ </option>
+ <option
+ value="02"
+ >
+ February
+ </option>
+ <option
+ value="03"
+ >
+ March
+ </option>
+ <option
+ value="04"
+ >
+ April
+ </option>
+ <option
+ value="05"
+ >
+ May
+ </option>
+ <option
+ value="06"
+ >
+ June
+ </option>
+ <option
+ value="07"
+ >
+ July
+ </option>
+ <option
+ value="08"
+ >
+ August
+ </option>
+ <option
+ value="09"
+ >
+ September
+ </option>
+ <option
+ value="10"
+ >
+ October
+ </option>
+ <option
+ value="11"
+ >
+ November
+ </option>
+ <option
+ value="12"
+ >
+ December
+ </option>
+ </select>
+ </div>
+ <div
+ className="components-datetime__time-field components-datetime__time-field-year"
+ >
+ <input
+ aria-label="Year"
+ className="components-datetime__time-field-year-input"
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="1986"
+ />
+ </div>
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend
+ className="components-datetime__time-legend invisible"
+ >
+ Time
+ </legend>
+ <div
+ className="components-datetime__time-wrapper"
+ >
+ <div
+ className="components-datetime__time-field components-datetime__time-field-time"
+ >
+ <input
+ aria-label="Hours"
+ className="components-datetime__time-field-hours-input"
+ max={12}
+ min={1}
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="11"
+ />
+ <span
+ aria-hidden="true"
+ className="components-datetime__time-separator"
+ >
+ :
+ </span>
+ <input
+ aria-label="Minutes"
+ className="components-datetime__time-field-minutes-input"
+ max={59}
+ min={0}
+ onBlur={[Function]}
+ onChange={[Function]}
+ type="number"
+ value="00"
+ />
+ </div>
+ <div
+ className="components-datetime__time-field components-datetime__time-field-am-pm"
+ >
+ <ForwardRef(Button)
+ aria-pressed={false}
+ className="components-datetime__time-am-button"
+ isDefault={true}
+ isToggled={false}
+ onClick={[Function]}
+ >
+ AM
+ </ForwardRef(Button)>
+ <ForwardRef(Button)
+ aria-pressed={true}
+ className="components-datetime__time-pm-button"
+ isDefault={true}
+ isToggled={true}
+ onClick={[Function]}
+ >
+ PM
+ </ForwardRef(Button)>
+ </div>
+ </div>
+ </fieldset>
+</div>
+`;
+
+exports[`TimePicker matches the snapshot when the is12hour prop is undefined 1`] = `
+<div
+ className="components-datetime__time"
+>
+ <fieldset>
+ <legend
+ className="components-datetime__time-legend invisible"
+ >
+ Date
+ </legend>
+ <div
+ className="components-datetime__time-wrapper"
+ >
+ <div
+ className="components-datetime__time-field components-datetime__time-field-month"
+ key="render-month"
+ >
+ <select
+ aria-label="Month"
+ className="components-datetime__time-field-month-select"
+ onBlur={[Function]}
+ onChange={[Function]}
+ value="10"
+ >
+ <option
+ value="01"
+ >
+ January
+ </option>
+ <option
+ value="02"
+ >
+ February
+ </option>
+ <option
+ value="03"
+ >
+ March
+ </option>
+ <option
+ value="04"
+ >
+ April
+ </option>
+ <option
+ value="05"
+ >
+ May
+ </option>
+ <option
+ value="06"
+ >
+ June
+ </option>
+ <option
+ value="07"
+ >
+ July
+ </option>
+ <option
+ value="08"
+ >
+ August
+ </option>
+ <option
+ value="09"
+ >
+ September
+ </option>
+ <option
+ value="10"
+ >
+ October
+ </option>
+ <option
+ value="11"
+ >
+ November
+ </option>
+ <option
+ value="12"
+ >
+ December
+ </option>
+ </select>
+ </div>
+ <div
+ className="components-datetime__time-field components-datetime__time-field-day"
+ key="render-day"
+ >
+ <input
+ aria-label="Day"
+ className="components-datetime__time-field-day-input"
+ min={1}
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="18"
+ />
+ </div>
+ <div
+ className="components-datetime__time-field components-datetime__time-field-year"
+ >
+ <input
+ aria-label="Year"
+ className="components-datetime__time-field-year-input"
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="1986"
+ />
+ </div>
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend
+ className="components-datetime__time-legend invisible"
+ >
+ Time
+ </legend>
+ <div
+ className="components-datetime__time-wrapper"
+ >
+ <div
+ className="components-datetime__time-field components-datetime__time-field-time"
+ >
+ <input
+ aria-label="Hours"
+ className="components-datetime__time-field-hours-input"
+ max={23}
+ min={0}
+ onBlur={[Function]}
+ onChange={[Function]}
+ step={1}
+ type="number"
+ value="23"
+ />
+ <span
+ aria-hidden="true"
+ className="components-datetime__time-separator"
+ >
+ :
+ </span>
+ <input
+ aria-label="Minutes"
+ className="components-datetime__time-field-minutes-input"
+ max={59}
+ min={0}
+ onBlur={[Function]}
+ onChange={[Function]}
+ type="number"
+ value="00"
+ />
+ </div>
+ </div>
+ </fieldset>
+</div>
+`;
diff --git a/packages/components/src/date-time/test/time.js b/packages/components/src/date-time/test/time.js
index 64c868ea293aa..3d61d058f330c 100644
--- a/packages/components/src/date-time/test/time.js
+++ b/packages/components/src/date-time/test/time.js
@@ -9,18 +9,24 @@ import { shallow } from 'enzyme';
import TimePicker from '../time';
describe( 'TimePicker', () => {
- it( 'should have the correct CSS class if 12-hour clock is specified', () => {
- const onChangeSpy = jest.fn();
- const picker = shallow( <TimePicker currentTime="1986-10-18T11:00:00" onChange={ onChangeSpy } is12Hour={ true } /> );
- expect( picker.hasClass( 'is-12-hour' ) ).toBe( true );
+ it( 'matches the snapshot when the is12hour prop is true', () => {
+ const wrapper = shallow( <TimePicker currentTime="1986-10-18T23:00:00" is12Hour={ true } /> );
+ expect( wrapper ).toMatchSnapshot();
} );
- it( 'should have the correct CSS class if 24-hour clock is specified', () => {
- const onChangeSpy = jest.fn();
- const picker = shallow(
- <TimePicker currentTime="1986-10-18T11:00:00" onChange={ onChangeSpy } is12Hour={ false } />
- );
- expect( picker.hasClass( 'is-24-hour' ) ).toBe( true );
+ it( 'matches the snapshot when the is12hour prop is false', () => {
+ const wrapper = shallow( <TimePicker currentTime="1986-10-18T23:00:00" is12Hour={ false } /> );
+ expect( wrapper ).toMatchSnapshot();
+ } );
+
+ it( 'matches the snapshot when the is12hour prop is specified', () => {
+ const wrapper = shallow( <TimePicker currentTime="1986-10-18T23:00:00" is12Hour /> );
+ expect( wrapper ).toMatchSnapshot();
+ } );
+
+ it( 'matches the snapshot when the is12hour prop is undefined', () => {
+ const wrapper = shallow( <TimePicker currentTime="1986-10-18T23:00:00" /> );
+ expect( wrapper ).toMatchSnapshot();
} );
it( 'should call onChange with an updated day', () => {
diff --git a/packages/components/src/date-time/time.js b/packages/components/src/date-time/time.js
index 1db16f6b362d2..8cb80cdee2167 100644
--- a/packages/components/src/date-time/time.js
+++ b/packages/components/src/date-time/time.js
@@ -43,6 +43,9 @@ class TimePicker extends Component {
this.updateMinutes = this.updateMinutes.bind( this );
this.onChangeHours = this.onChangeHours.bind( this );
this.onChangeMinutes = this.onChangeMinutes.bind( this );
+ this.renderMonth = this.renderMonth.bind( this );
+ this.renderDay = this.renderDay.bind( this );
+ this.renderDayMonthFormat = this.renderDayMonthFormat.bind( this );
}
componentDidMount() {
@@ -189,52 +192,65 @@ class TimePicker extends Component {
this.setState( { minutes: event.target.value } );
}
+ renderMonth( month ) {
+ return (
+ <div key="render-month" className="components-datetime__time-field components-datetime__time-field-month">
+ <select
+ aria-label={ __( 'Month' ) }
+ className="components-datetime__time-field-month-select"
+ value={ month }
+ onChange={ this.onChangeMonth }
+ onBlur={ this.updateMonth }
+ >
+ <option value="01">{ __( 'January' ) }</option>
+ <option value="02">{ __( 'February' ) }</option>
+ <option value="03">{ __( 'March' ) }</option>
+ <option value="04">{ __( 'April' ) }</option>
+ <option value="05">{ __( 'May' ) }</option>
+ <option value="06">{ __( 'June' ) }</option>
+ <option value="07">{ __( 'July' ) }</option>
+ <option value="08">{ __( 'August' ) }</option>
+ <option value="09">{ __( 'September' ) }</option>
+ <option value="10">{ __( 'October' ) }</option>
+ <option value="11">{ __( 'November' ) }</option>
+ <option value="12">{ __( 'December' ) }</option>
+ </select>
+ </div>
+ );
+ }
+
+ renderDay( day ) {
+ return (
+ <div key="render-day" className="components-datetime__time-field components-datetime__time-field-day">
+ <input
+ aria-label={ __( 'Day' ) }
+ className="components-datetime__time-field-day-input"
+ type="number"
+ value={ day }
+ step={ 1 }
+ min={ 1 }
+ onChange={ this.onChangeDay }
+ onBlur={ this.updateDay }
+ />
+ </div>
+ );
+ }
+
+ renderDayMonthFormat( is12Hour ) {
+ const { day, month } = this.state;
+ const layout = [ this.renderDay( day ), this.renderMonth( month ) ];
+ return is12Hour ? layout : layout.reverse();
+ }
+
render() {
const { is12Hour } = this.props;
- const { day, month, year, minutes, hours, am } = this.state;
-
+ const { year, minutes, hours, am } = this.state;
return (
- <div className={ classnames( 'components-datetime__time', {
- 'is-12-hour': is12Hour,
- 'is-24-hour': ! is12Hour,
- } ) }>
+ <div className={ classnames( 'components-datetime__time' ) }>
<fieldset>
<legend className="components-datetime__time-legend invisible">{ __( 'Date' ) }</legend>
<div className="components-datetime__time-wrapper">
- <div className="components-datetime__time-field components-datetime__time-field-month">
- <select
- aria-label={ __( 'Month' ) }
- className="components-datetime__time-field-month-select"
- value={ month }
- onChange={ this.onChangeMonth }
- onBlur={ this.updateMonth }
- >
- <option value="01">{ __( 'January' ) }</option>
- <option value="02">{ __( 'February' ) }</option>
- <option value="03">{ __( 'March' ) }</option>
- <option value="04">{ __( 'April' ) }</option>
- <option value="05">{ __( 'May' ) }</option>
- <option value="06">{ __( 'June' ) }</option>
- <option value="07">{ __( 'July' ) }</option>
- <option value="08">{ __( 'August' ) }</option>
- <option value="09">{ __( 'September' ) }</option>
- <option value="10">{ __( 'October' ) }</option>
- <option value="11">{ __( 'November' ) }</option>
- <option value="12">{ __( 'December' ) }</option>
- </select>
- </div>
- <div className="components-datetime__time-field components-datetime__time-field-day">
- <input
- aria-label={ __( 'Day' ) }
- className="components-datetime__time-field-day-input"
- type="number"
- value={ day }
- step={ 1 }
- min={ 1 }
- onChange={ this.onChangeDay }
- onBlur={ this.updateDay }
- />
- </div>
+ { this.renderDayMonthFormat( is12Hour ) }
<div className="components-datetime__time-field components-datetime__time-field-year">
<input
aria-label={ __( 'Year' ) }