UNPKG

3.13 kBtext/x-handlebars-templateView Raw
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<!-- Basic with calendar -->
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--nolabel">
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 {{#if componentsX}}
21 <div class="{{@root.prefix}}--date-picker-input__wrapper">
22 <input type="text" id="date-picker-3" class="{{@root.prefix}}--date-picker__input"
23 pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
24 {{ carbon-icon 'Calendar16' class=(add @root.prefix '--date-picker__icon') data-date-picker-icon="true" }}
25 </div>
26 {{else}}
27 <input type="text" id="date-picker-3" class="{{@root.prefix}}--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
28 placeholder="mm/dd/yyyy" data-date-picker-input />
29 {{/if}}
30 </div>
31 </div>
32</div>
33
34<!-- Basic with calendar -->
35<div class="{{@root.prefix}}--form-item">
36 <div data-date-picker data-date-picker-type="single"
37 class="{{@root.prefix}}--date-picker {{@root.prefix}}--date-picker--single {{@root.prefix}}--date-picker--nolabel">
38 <div class="{{@root.prefix}}--date-picker-container">
39 {{#unless componentsX}}
40 <svg data-date-picker-icon class="{{@root.prefix}}--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
41 <path
42 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"
43 fill-rule="nonzero" />
44 </svg>
45 {{/unless}}
46 {{#if componentsX}}
47 <div class="{{@root.prefix}}--date-picker-input__wrapper">
48 <input data-invalid type="text" id="date-picker-3" class="{{@root.prefix}}--date-picker__input"
49 pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
50 {{ carbon-icon 'Calendar16' class=(add @root.prefix '--date-picker__icon') data-date-picker-icon="true" }}
51 </div>
52 {{else}}
53 <input data-invalid type="text" id="date-picker-3" class="{{@root.prefix}}--date-picker__input"
54 pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
55 {{/if}}
56 <div class="{{@root.prefix}}--form-requirement">
57 Invalid date format.
58 </div>
59 </div>
60 </div>
61</div>
62
\No newline at end of file