1 |
|
2 | Copyright IBM Corp. 2016, 2018
|
3 |
|
4 | This source code is licensed under the Apache-2.0 license found in the
|
5 | LICENSE file in the root directory of this source tree.
|
6 | -->
|
7 |
|
8 | <div class="{{prefix}}--form-item">
|
9 | <label for="time-picker-1" class="{{prefix}}--label">Select a time</label>
|
10 | <div class="{{prefix}}--time-picker">
|
11 | <div class="{{prefix}}--time-picker__input">
|
12 | <input id="time-picker-1" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
|
13 | pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" />
|
14 | </div>
|
15 | <div
|
16 | class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
|
17 | <label for="select-id-1" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
|
18 | <select id="select-id-1" class="{{prefix}}--select-input">
|
19 | <option class="{{prefix}}--select-option" value="AM">AM</option>
|
20 | <option class="{{prefix}}--select-option" value="PM">PM</option>
|
21 | </select>
|
22 | {{#if componentsX}}
|
23 | {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
|
24 | {{else}}
|
25 | <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
|
26 | <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
|
27 | </svg>
|
28 | {{/if}}
|
29 | </div>
|
30 | <div
|
31 | class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
|
32 | <label for="select-id-2" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
|
33 | zone</label>
|
34 | <select id="select-id-2" class="{{prefix}}--select-input">
|
35 | <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
|
36 | <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
|
37 | <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
|
38 | </select>
|
39 | {{#if componentsX}}
|
40 | {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
|
41 | {{else}}
|
42 | <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
|
43 | <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
|
44 | </svg>
|
45 | {{/if}}
|
46 | </div>
|
47 | </div>
|
48 | </div>
|
49 | <div class="{{prefix}}--form-item">
|
50 | <label for="time-picker-2" class="{{prefix}}--label">Select a time</label>
|
51 | <div class="{{prefix}}--time-picker" data-invalid>
|
52 | <div class="{{prefix}}--time-picker__input">
|
53 | <input id="time-picker-2" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
|
54 | pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" />
|
55 | {{#unless componentsX}}
|
56 | <div class="{{prefix}}--form-requirement">
|
57 | Invalid time.
|
58 | </div>
|
59 | {{/unless}}
|
60 | </div>
|
61 | <div
|
62 | class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
|
63 | <label for="select-id-3" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
|
64 | <select id="select-id-3" class="{{prefix}}--select-input">
|
65 | <option class="{{prefix}}--select-option" value="AM">AM</option>
|
66 | <option class="{{prefix}}--select-option" value="PM">PM</option>
|
67 | </select>
|
68 | {{#if componentsX}}
|
69 | {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
|
70 | {{else}}
|
71 | <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
|
72 | <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
|
73 | </svg>
|
74 | {{/if}}
|
75 | </div>
|
76 | <div
|
77 | class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
|
78 | <label for="select-id-4" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
|
79 | zone</label>
|
80 | <select id="select-id-4" class="{{prefix}}--select-input">
|
81 | <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
|
82 | <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
|
83 | <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
|
84 | </select>
|
85 | {{#if componentsX}}
|
86 | {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
|
87 | {{else}}
|
88 | <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
|
89 | <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
|
90 | </svg>
|
91 | {{/if}}
|
92 | </div>
|
93 | </div>
|
94 | {{#if componentsX}}
|
95 | <div class="{{prefix}}--form-requirement">
|
96 | Invalid time.
|
97 | </div>
|
98 | {{/if}}
|
99 | </div>
|
100 | <div class="{{prefix}}--form-item">
|
101 | <label for="time-picker-3" class="{{prefix}}--label {{prefix}}--label--disabled">Select a time</label>
|
102 | <div class="{{prefix}}--time-picker">
|
103 | <div class="{{prefix}}--time-picker__input">
|
104 | <input id="time-picker-3" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
|
105 | pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" disabled />
|
106 | </div>
|
107 | <div
|
108 | class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
|
109 | <label for="select-id-5" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
|
110 | <select id="select-id-5" class="{{prefix}}--select-input" disabled>
|
111 | <option class="{{prefix}}--select-option" value="AM">AM</option>
|
112 | <option class="{{prefix}}--select-option" value="PM">PM</option>
|
113 | </select>
|
114 | {{#if componentsX}}
|
115 | {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
|
116 | {{else}}
|
117 | <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
|
118 | <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
|
119 | </svg>
|
120 | {{/if}}
|
121 | </div>
|
122 | <div
|
123 | class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
|
124 | <label for="select-id-6" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
|
125 | zone</label>
|
126 | <select id="select-id-6" class="{{prefix}}--select-input" disabled>
|
127 | <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
|
128 | <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
|
129 | <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
|
130 | </select>
|
131 | {{#if componentsX}}
|
132 | {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
|
133 | {{else}}
|
134 | <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
|
135 | <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
|
136 | </svg>
|
137 | {{/if}}
|
138 | </div>
|
139 | </div>
|
140 | </div>
|
141 | <div class="{{prefix}}--form-item">
|
142 | <label for="time-picker-4" class="{{prefix}}--label {{prefix}}--label--disabled">Select a time</label>
|
143 | <div class="{{prefix}}--time-picker" data-invalid>
|
144 | <div class="{{prefix}}--time-picker__input">
|
145 | <input id="time-picker-4" type="text" class="{{prefix}}--text-input {{prefix}}--time-picker__input-field"
|
146 | pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" disabled />
|
147 | {{#unless componentsX}}
|
148 | <div class="{{prefix}}--form-requirement">
|
149 | Invalid time.
|
150 | </div>
|
151 | {{/unless}}
|
152 | </div>
|
153 | <div
|
154 | class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
|
155 | <label for="select-id-7" class="{{prefix}}--label {{prefix}}--visually-hidden">Select AM/PM</label>
|
156 | <select id="select-id-7" class="{{prefix}}--select-input" disabled>
|
157 | <option class="{{prefix}}--select-option" value="AM">AM</option>
|
158 | <option class="{{prefix}}--select-option" value="PM">PM</option>
|
159 | </select>
|
160 | {{#if componentsX}}
|
161 | {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
|
162 | {{else}}
|
163 | <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
|
164 | <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
|
165 | </svg>
|
166 | {{/if}}
|
167 | </div>
|
168 | <div
|
169 | class="{{prefix}}--time-picker__select {{prefix}}--select{{#unless componentsX}} {{prefix}}--select--inline{{/unless}}">
|
170 | <label for="select-id-8" class="{{prefix}}--label {{prefix}}--visually-hidden">Select time
|
171 | zone</label>
|
172 | <select id="select-id-8" class="{{prefix}}--select-input" disabled>
|
173 | <option class="{{prefix}}--select-option" value="option-1">Time zone 1</option>
|
174 | <option class="{{prefix}}--select-option" value="option-2">Time zone 2</option>
|
175 | <option class="{{prefix}}--select-option" value="option-3">Time zone 3</option>
|
176 | </select>
|
177 | {{#if componentsX}}
|
178 | {{ carbon-icon 'ChevronDown16' class=(add prefix '--select__arrow') }}
|
179 | {{else}}
|
180 | <svg class="{{prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
|
181 | <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
|
182 | </svg>
|
183 | {{/if}}
|
184 | </div>
|
185 | </div>
|
186 | {{#if componentsX}}
|
187 | <div class="{{prefix}}--form-requirement">
|
188 | Invalid time.
|
189 | </div>
|
190 | {{/if}}
|
191 | </div>
|
192 |
|
\ | No newline at end of file |