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 |
|
9 | <div class="{{@root.prefix}}--form-item">
|
10 | <div data-date-picker data-date-picker-type="single"
|
11 | class="{{@root.prefix}}--date-picker {{@root.prefix}}--date-picker--single {{@root.prefix}}--date-picker--light">
|
12 | <div class="{{@root.prefix}}--date-picker-container">
|
13 | {{#unless componentsX}}
|
14 | <svg data-date-picker-icon class="{{@root.prefix}}--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
|
15 | <path
|
16 | d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
|
17 | fill-rule="nonzero" />
|
18 | </svg>
|
19 | {{/unless}}
|
20 | <label for="date-picker-3" class="{{@root.prefix}}--label">Date Picker label</label>
|
21 | {{#if componentsX}}
|
22 | <div class="{{@root.prefix}}--date-picker-input__wrapper">
|
23 | <input type="text" id="date-picker-3" class="{{@root.prefix}}--date-picker__input"
|
24 | pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
|
25 | {{ carbon-icon 'Calendar16' class=(add @root.prefix '--date-picker__icon') data-date-picker-icon="true" }}
|
26 | </div>
|
27 | {{else}}
|
28 | <input type="text" id="date-picker-3" class="{{@root.prefix}}--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
|
29 | placeholder="mm/dd/yyyy" data-date-picker-input />
|
30 | {{/if}}
|
31 | </div>
|
32 | </div>
|
33 | </div>
|
34 |
|
35 |
|
36 | <div class="{{@root.prefix}}--form-item">
|
37 | <div data-date-picker data-date-picker-type="single"
|
38 | class="{{@root.prefix}}--date-picker {{@root.prefix}}--date-picker--single {{@root.prefix}}--date-picker--light">
|
39 | <div class="{{@root.prefix}}--date-picker-container">
|
40 | {{#unless componentsX}}
|
41 | <svg data-date-picker-icon class="{{@root.prefix}}--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
|
42 | <path
|
43 | d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
|
44 | fill-rule="nonzero" />
|
45 | </svg>
|
46 | {{/unless}}
|
47 | <label for="date-picker-3" class="{{@root.prefix}}--label">Date Picker label</label>
|
48 | {{#if componentsX}}
|
49 | <div class="{{@root.prefix}}--date-picker-input__wrapper">
|
50 | <input data-invalid type="text" id="date-picker-3" class="{{@root.prefix}}--date-picker__input"
|
51 | pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
|
52 | {{ carbon-icon 'Calendar16' class=(add @root.prefix '--date-picker__icon') data-date-picker-icon="true" }}
|
53 | </div>
|
54 | {{else}}
|
55 | <input data-invalid type="text" id="date-picker-3" class="{{@root.prefix}}--date-picker__input"
|
56 | pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
|
57 | {{/if}}
|
58 | <div class="{{@root.prefix}}--form-requirement">
|
59 | Invalid date format.
|
60 | </div>
|
61 | </div>
|
62 | </div>
|
63 | </div>
|
64 |
|
\ | No newline at end of file |