SluttaClassic/ModalDatePicker.ux at master · hdir/SluttaClassic · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<Panel ux:Class="ModalDatePicker" IsOpen="false">
    <bool ux:Property="IsOpen" />
    <object ux:Property="Date" />
    <object ux:Property="MinDate" />
    <object ux:Property="MaxDate" />
    <JavaScript>
        const Observable = require("FuseJS/Observable");
        const DateTimeHelpers = require("DateTimeHelpers");
        const moment = require('ExtraJS/moment');

        //
        // NOTE: The 'Date' property is actualy an Observable of milliseconds
        //

        const tagThis = this;

        const pickerDate = Observable(moment().toDate());
        const localDate = Observable(moment().toDate());

        const onOpenOrClose = this.IsOpen.onValueChanged(module, function(val) {
            if (val) {
                pickerDate.value = new Date(tagThis.Date.value.value);
            }
        });

        pickerDate.onValueChanged(module, function(val) {
            var m = moment(val);
            m.utc();
            m.hour(0);
            m.minute(0);
            m.second(0);
            m.millisecond(0);

            localDate.value = m.toDate();
        });

        const save = function(jsDateObj) {
            tagThis.Date.value.value = jsDateObj;
        }

        const saveLatest = function() {
            save(localDate.value);
        }

        var setToNow = function() {
            save(moment().toDate());
        };

        module.exports = {
            pickerDate: pickerDate,
            localDate: localDate,
            saveLatest: saveLatest,
            setToNow: setToNow,
        }
    </JavaScript>
    <WhileTrue Value="{Property IsOpen}">
        <StackPanel Color="#f6f6f6" Alignment="Bottom">
            <Rectangle Color="#ccc" Height="1" />
            <DockPanel Color="#eee">
                <DockPanel Dock="Right">
                    <Rectangle ux:Name="rect3" Color="#ffffff00">
                        <Text Value="Ferdig" Font="Bold" Color="#333" Margin="18">
                            <Tapped>
                                <Callback Handler="{saveLatest}" />
                                <Set Target="this.IsOpen" Value="false" />
                            </Tapped>
                        </Text>
                        <WhilePressed>
                            <Change Target="rect3.Color" Value="#efefef" />
                        </WhilePressed>
                    </Rectangle>
                </DockPanel>
                <DockPanel Dock="Left">
                    <Rectangle ux:Name="rect4" Color="#ffffff00">
                        <Text Color="#666" Font="Bold" Value="Tilbakestill dato" Margin="18">
                            <Tapped>
                                <Callback Handler="{setToNow}" />
                                <Set Target="this.IsOpen" Value="false" />
                            </Tapped>
                        </Text>
                        <WhilePressed>
                            <Change Target="rect4.Color" Value="#efefef" />
                        </WhilePressed>
                    </Rectangle>
                </DockPanel>
            </DockPanel>
            <Rectangle Color="#ccc" Height="1" />
            <NativeViewHost Alignment="Center">
                <MyDatePicker Value="{pickerDate}"
                              MinValue="{Property MinDate}"
                              MaxValue="{Property MaxDate}" />
            </NativeViewHost>

        </StackPanel>
        <Android>
            <Rectangle Color="White" Opacity="0.7" />
        </Android>
    </WhileTrue>
</Panel>