ComponentPicker/demo.html at master · SergioCrisostomo/ComponentPicker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="lib/ComponentPicker.js"></script>
    <link rel="stylesheet" type="text/css" href="lib/ComponentPicker.css">
    <style>
    body {
        background-color: #fff;
    }
    .example {
        float: left;
        width: 100%;
    }
    .example h1 {
        color: #000;
    }
    .picker {
        width: 30rem;
        //margin: 20% auto;
    }
    .picker .component-picker{
        float: left;
    }
    .value {
        width: 100%;
        padding: 1rem;
        color: #333;
        float: left;
        font-size: 2rem;
    }
    </style>
</head>

<body>
	You can use "scroll", "click", or "drag" to choose between components.

    <div class="example">
        <h1>Single component pickers</h1>
        <div class="picker"></div>
        <div class="value"></div>
    </div>
    <div class="example">
        <h1>Date picker (3 in one)</h1>
        <div class="picker"></div>
        <div class="value"></div>
    </div>
    <script>

    var targets = document.querySelectorAll('body div.example .picker');
    var componentTarget = targets[0];
    var datepickerTarget = targets[1];
    new ComponentPicker(componentTarget, ['Day', 'Night']).onChange(listener);
    new ComponentPicker(componentTarget, ['am', 'pm']).onChange(listener);
    new DatePicker(datepickerTarget, ['2015-2025', '1-12', '1-31'], {pad: true})
		.onChange(listener)
		.today();
    function listener(){
        var valueDiv = this.wrapper.parentElement.nextElementSibling;
        var val = this.getValue()
        valueDiv.innerHTML = val instanceof Array ? val.join('-') : val;
    }
    </script>
</body>
</html>