| 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>DatePicker2</title> |
|---|
| 8 | |
|---|
| 9 | <script type="text/javascript" src="../deviceTheme.js" ></script> |
|---|
| 10 | <script type="text/javascript" src="../../../dojo/dojo.js" |
|---|
| 11 | data-dojo-config="async: true, parseOnLoad: false"></script> |
|---|
| 12 | |
|---|
| 13 | <script type="text/javascript"> |
|---|
| 14 | var opener, updateDate, showDatePicker, onShow, onHide, datePicker1, datePicker2; |
|---|
| 15 | onShow = function(){ |
|---|
| 16 | // console.log("Set datePicker to current date: ", date.toISOString()); |
|---|
| 17 | datePicker2.set("value", date); |
|---|
| 18 | }; |
|---|
| 19 | onHide = function(node, v){ |
|---|
| 20 | if(v){ |
|---|
| 21 | var newDate = datePicker2.get("value"); |
|---|
| 22 | // console.log("newDate: ", newDate); |
|---|
| 23 | node.value = newDate; |
|---|
| 24 | // set new Date |
|---|
| 25 | date = newDate; |
|---|
| 26 | } |
|---|
| 27 | }; |
|---|
| 28 | require(["dojo/ready","dojox/mobile/parser", |
|---|
| 29 | "dijit/registry", "dojox/mobile/DatePicker", "dojo/date/stamp", "dojox/mobile/Opener", "dojox/mobile/compat", |
|---|
| 30 | "dojox/mobile/Heading", "dojox/mobile/ToolBarButton"], |
|---|
| 31 | function(ready, parser, registry, DatePicker, stamp) { |
|---|
| 32 | ready(function() { |
|---|
| 33 | parser.parse(); |
|---|
| 34 | |
|---|
| 35 | // First DatePicker: |
|---|
| 36 | datePicker1 = registry.byId("datePicker1"); |
|---|
| 37 | // set the value of a picker already displayed, after construction time |
|---|
| 38 | datePicker1.set("value", "2020-01-01"); |
|---|
| 39 | |
|---|
| 40 | // Second DatePicker: |
|---|
| 41 | datePicker2 = registry.byId("datePicker2"); |
|---|
| 42 | opener = registry.byId("opener"); |
|---|
| 43 | // initialize the globale Date variable as today |
|---|
| 44 | date = stamp.toISOString(new Date(), {selector: "date"}); |
|---|
| 45 | // console.log("Initial date is: ", date); |
|---|
| 46 | |
|---|
| 47 | showDatePicker = function(toto) { |
|---|
| 48 | opener.show(toto, ['below-centered','above-centered','after','before']); |
|---|
| 49 | }; |
|---|
| 50 | updateDate = function() { |
|---|
| 51 | // console.log("update date to new Date:", date); |
|---|
| 52 | var newDate = new Date(stamp.fromISOString(date)); |
|---|
| 53 | newDate.setFullYear("2020"); |
|---|
| 54 | date = stamp.toISOString(newDate, {selector: "date"}); |
|---|
| 55 | } |
|---|
| 56 | }); |
|---|
| 57 | }); |
|---|
| 58 | </script> |
|---|
| 59 | </head> |
|---|
| 60 | <body> |
|---|
| 61 | |
|---|
| 62 | <div> |
|---|
| 63 | <div style="text-align:left;font-weight:bold">The date picker below should be |
|---|
| 64 | displaying: Jan-01-2020</div> |
|---|
| 65 | <div id="datePicker1" data-dojo-type="dojox/mobile/DatePicker"></div> |
|---|
| 66 | <hr> |
|---|
| 67 | <div style="text-align:left;font-weight:bold">The date picker below should display |
|---|
| 68 | the current date unless you change the year using the button</div> |
|---|
| 69 | <input readOnly value="" placeholder="Select a date" |
|---|
| 70 | onclick="showDatePicker(this)"></input> |
|---|
| 71 | <div id="opener" data-dojo-type="dojox/mobile/Opener" |
|---|
| 72 | data-dojo-props="onShow: onShow, onHide: onHide"> |
|---|
| 73 | <h1 data-dojo-type="dojox/mobile/Heading" label="Date Picker"> |
|---|
| 74 | <span data-dojo-type="dojox/mobile/ToolBarButton" |
|---|
| 75 | data-dojo-props="label:'Done'" class="mblColorBlue" |
|---|
| 76 | onclick="opener.hide(true)" |
|---|
| 77 | style="position:absolute;width:45px;right:0;"> |
|---|
| 78 | </span> |
|---|
| 79 | <span data-dojo-type="dojox/mobile/ToolBarButton" |
|---|
| 80 | data-dojo-props="label:'Cancel'" class="mblColorBlue" |
|---|
| 81 | onclick="opener.hide(false)" |
|---|
| 82 | style="position:absolute;width:45px;left:0;"> |
|---|
| 83 | </span> |
|---|
| 84 | </h1> |
|---|
| 85 | <div id="datePicker2" data-dojo-type="dojox/mobile/DatePicker"></div> |
|---|
| 86 | </div> |
|---|
| 87 | <button onclick="updateDate();">Change year to 2020</button> |
|---|
| 88 | </div> |
|---|
| 89 | </body> |
|---|
| 90 | </html> |
|---|
