UNPKG

carbon-components/html/date-picker/date-picker--single.html

Version:

1<!--
Copyright IBM Corp. 2016, 2018
3
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
6-->
7
8<!-- Basic with calendar -->
9<div class="bx--form-item">
<div data-date-picker data-date-picker-type="single"
  class="bx--date-picker bx--date-picker--single">
  <div class="bx--date-picker-container">
    <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
      <path
        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"
        fill-rule="nonzero" />
    </svg>
    <label for="date-picker-3" class="bx--label">Date Picker label</label>
    <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"
      placeholder="mm/dd/yyyy" data-date-picker-input />
  </div>
</div>
23</div>
24
25<!-- Basic with calendar -->
26<div class="bx--form-item">
<div data-date-picker data-date-picker-type="single"
  class="bx--date-picker bx--date-picker--single">
  <div class="bx--date-picker-container">
    <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
      <path
        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"
        fill-rule="nonzero" />
    </svg>
    <label for="date-picker-3" class="bx--label">Date Picker label</label>
    <input data-invalid type="text" id="date-picker-3" class="bx--date-picker__input"
      pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
    <div class="bx--form-requirement">
      Invalid date format.
    </div>
  </div>
</div>
43</div>

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="bx--form-item">`
10	`<div data-date-picker data-date-picker-type="single"`
11	`class="bx--date-picker bx--date-picker--single">`
12	`<div class="bx--date-picker-container">`
13	`<svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">`
14	`<path`
15	`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"`
16	`fill-rule="nonzero" />`
17	`</svg>`
18	`<label for="date-picker-3" class="bx--label">Date Picker label</label>`
19	`<input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}"`
20	`placeholder="mm/dd/yyyy" data-date-picker-input />`
21	`</div>`
22	`</div>`
23	`</div>`
24
25	`<!-- Basic with calendar -->`
26	`<div class="bx--form-item">`
27	`<div data-date-picker data-date-picker-type="single"`
28	`class="bx--date-picker bx--date-picker--single">`
29	`<div class="bx--date-picker-container">`
30	`<svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">`
31	`<path`
32	`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"`
33	`fill-rule="nonzero" />`
34	`</svg>`
35	`<label for="date-picker-3" class="bx--label">Date Picker label</label>`
36	`<input data-invalid type="text" id="date-picker-3" class="bx--date-picker__input"`
37	`pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />`
38	`<div class="bx--form-requirement">`
39	`Invalid date format.`
40	`</div>`
41	`</div>`
42	`</div>`
43	`</div>`