source: Dev/trunk/src/client/dojox/mobile/tests/test_ValuePickerDatePicker.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 4.9 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
6        <meta name="apple-mobile-web-app-capable" content="yes"/>
7        <title>ValuePickerDatePicker</title>
8
9        <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','ValuePicker']"></script>
10        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
11
12        <script type="text/javascript">
13                var changeLocale, gotoToday, showSelectedValue;
14                var onYearSet, onMonthSet, onDaySet;
15                require([
16                        "dojo/_base/kernel"
17                ], function(dojo){
18                        var lang = location.search.match(/lang=(\w*)/) ? RegExp.$1 : null;
19                        if(lang){ dojo.locale = lang; }
20                        require([
21                                "dojo/_base/window",
22                                "dojo/dom",
23                                "dojo/ready",
24                                "dijit/registry",
25                                "dojo/_base/xhr",
26                                "dojox/mobile/parser",
27                                "dojox/mobile",
28                                "dojox/mobile/compat",
29                                "dojox/mobile/ValuePickerDatePicker"
30                        ], function(win, dom, ready, registry){
31                                changeLocale = function(){
32                                        win.doc.forms[0].submit();
33                                }
34                                gotoToday = function(){
35                                        registry.byId("picker1").reset();
36                                }
37                                showSelectedValue = function(){
38                                        var w = registry.byId("picker1");
39                                        document.getElementById("msg").innerHTML =
40                                                w.slots[0].get("value")+ ":" + w.slots[1].get("value") + ":" + w.slots[2].get("value");
41                                }
42                                onYearSet = function(){
43                                        console.log("onYearSet value: " + this.slots[0].get("value"));
44                                }
45                                onMonthSet = function(){
46                                        console.log("onMonthSet value: " + this.slots[1].get("value"));
47                                }
48                                onDaySet = function(){
49                                        console.log("onDaySet value: " + this.slots[2].get("value"));
50                                }
51                                ready(function(){
52                                        dom.byId("sel").value = lang;
53                                       
54                                        var picker = registry.byId("picker1"),
55                                                yearSlot = picker.slots[0],
56                                                monthSlot = picker.slots[1],
57                                                daySlot = picker.slots[2];
58
59                                        yearSlot.watch("value", function(name, oldVal, newVal){
60                                                console.log("watch value of year slot: oldVal: " + oldVal + " newVal: " + newVal);
61                                                document.getElementById("msg").innerHTML =
62                                                        "watch value of year slot: oldVal: " + oldVal + " newVal: " + newVal;
63                                        });
64                                        monthSlot.watch("value", function(name, oldVal, newVal){
65                                                console.log("watch value of month slot: oldVal: " + oldVal + " newVal: " + newVal);
66                                                document.getElementById("msg").innerHTML =
67                                                        "watch value of month slot: oldVal: " + oldVal + " newVal: " + newVal;
68                                        });
69                                        daySlot.watch("value", function(name, oldVal, newVal){
70                                                console.log("watch value of day slot: oldVal: " + oldVal + " newVal: " + newVal);
71                                                document.getElementById("msg").innerHTML =
72                                                        "watch value of day slot: oldVal: " + oldVal + " newVal: " + newVal;
73                                        });
74                                });
75                        });
76                });
77        </script>
78
79        <style>
80        #picker1 {
81                margin: 20px;
82        }
83        </style>
84</head>
85<body style="visibility:hidden;background-color:#424142;">
86        <div data-dojo-type="dojox.mobile.View">
87                <form>
88                        <div data-dojo-type="dojox.mobile.Heading">
89                                <span data-dojo-type="dojox.mobile.ToolBarButton" onClick="showSelectedValue()" data-dojo-props='label:"OK"'></span>
90                                <span data-dojo-type="dojox.mobile.ToolBarButton" onClick="gotoToday()" data-dojo-props='label:"Today"'></span>
91                                <select id="sel" name="lang" onchange="changeLocale()" style="float:left;margin-top:10px;">
92                                        <option value=""></option>
93                                        <option value="ar">ar</option>
94                                        <option value="ca">ca</option>
95                                        <option value="cs">cs</option>
96                                        <option value="da">da</option>
97                                        <option value="de">de</option>
98                                        <option value="el">el</option>
99                                        <option value="en">en</option>
100                                        <option value="en-au">en-au</option>
101                                        <option value="en-ca">en-ca</option>
102                                        <option value="en-gb">en-gb</option>
103                                        <option value="es">es</option>
104                                        <option value="fi">fi</option>
105                                        <option value="fr">fr</option>
106                                        <option value="fr-ch">fr-ch</option>
107                                        <option value="he">he</option>
108                                        <option value="hu">hu</option>
109                                        <option value="it">it</option>
110                                        <option value="ja">ja</option>
111                                        <option value="ko">ko</option>
112                                        <option value="nb">nb</option>
113                                        <option value="nl">nl</option>
114                                        <option value="pl">pl</option>
115                                        <option value="pt">pt</option>
116                                        <option value="pt-pt">pt-pt</option>
117                                        <option value="ro">ro</option>
118                                        <option value="ru">ru</option>
119                                        <option value="sk">sk</option>
120                                        <option value="sl">sl</option>
121                                        <option value="sv">sv</option>
122                                        <option value="th">th</option>
123                                        <option value="tr">tr</option>
124                                        <option value="zh">zh</option>
125                                        <option value="zh-hant">zh-hant</option>
126                                        <option value="zh-hk">zh-hk</option>
127                                        <option value="zh-tw">zh-tw</option>
128                                </select>
129                        </div>
130                </form>
131                <div id="picker1" data-dojo-type="dojox.mobile.ValuePickerDatePicker"
132                        data-dojo-props="onYearSet: onYearSet, onMonthSet: onMonthSet, onDaySet: onDaySet">
133                </div>
134                <div id="msg"></div>
135        </div>
136</body>
137</html>
Note: See TracBrowser for help on using the repository browser.