You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
186 lines
5.6 KiB
186 lines
5.6 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/> |
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> |
|
<meta name="apple-mobile-web-app-capable" content="yes"/> |
|
<title>ValuePicker on SimpleDialog</title> |
|
|
|
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','SimpleDialog','ValuePicker']"></script> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"dojo/date/locale", |
|
"dojo/dom", |
|
"dojo/ready", |
|
"dijit/registry", |
|
"dojox/mobile/ProgressIndicator", |
|
"dojox/mobile/parser", |
|
"dojox/mobile", |
|
"dojox/mobile/compat", |
|
"dojox/mobile/SimpleDialog", |
|
"dojox/mobile/Button", |
|
"dojox/mobile/ValuePickerDatePicker", |
|
"dojox/mobile/ValuePickerTimePicker" |
|
], function(locale, dom, ready, registry, ProgressIndicator){ |
|
var date; |
|
show = function(dlg){ |
|
if(dlg == "dlg1"){ |
|
date = registry.byId("picker1").get("values"); |
|
}else if(dlg == "dlg2"){ |
|
date = registry.byId("picker2").get("values"); |
|
} |
|
registry.byId(dlg).show(); |
|
}; |
|
hide = function(dlg){ |
|
registry.byId(dlg).hide(); |
|
}; |
|
cancel = function(dlg){ |
|
if(dlg == "dlg1"){ |
|
registry.byId("picker1").set("values", date); |
|
}else if(dlg == "dlg2"){ |
|
registry.byId("picker2").set("values", date); |
|
} |
|
registry.byId(dlg).show(); |
|
hide(dlg); |
|
}; |
|
|
|
// Dialog Box |
|
updateDateDialog = function(){ |
|
var d = registry.byId("picker1").get("date"); |
|
if(d){ |
|
dom.byId("msg1").innerHTML = |
|
locale.format(d, {formatLength:"full",selector:"date"}); |
|
} |
|
}; |
|
updateTimeDialog = function(){ |
|
var d = registry.byId("picker2").get("date"); |
|
if(d){ |
|
dom.byId("msg2").innerHTML = |
|
locale.format(d, {timePattern:is24h?"H:mm":"h:mm a",selector:"time"}); |
|
} |
|
}; |
|
onValueChanged1 = function(){ |
|
updateDateDialog(); |
|
}; |
|
onValueChanged2 = function(){ |
|
updateTimeDialog(); |
|
}; |
|
|
|
|
|
// ListItem |
|
updateDateListItem = function(){ |
|
var d = registry.byId("picker1").get("date"); |
|
if(d){ |
|
dom.byId("dateMsg").innerHTML = |
|
locale.format(d, {formatLength:"short",selector:"date"}); |
|
} |
|
}; |
|
updateTimeListItem = function(){ |
|
var d = registry.byId("picker2").get("date"); |
|
if(d){ |
|
dom.byId("timeMsg").innerHTML = |
|
locale.format(d, {timePattern:is24h?"H:mm":"h:mm a",selector:"time"}); |
|
} |
|
}; |
|
|
|
setDate = function(){ |
|
updateDateListItem(); |
|
hide('dlg1'); |
|
}; |
|
setTime = function(){ |
|
updateTimeListItem(); |
|
hide('dlg2'); |
|
}; |
|
|
|
is24h = true; |
|
use24h = function(){ |
|
var listItem = registry.byId("item1") |
|
if(is24h){ |
|
listItem.set("rightIcon", "mblDomButtonCheckboxOff"); |
|
dom.byId("use24hMsg").innerHTML = "1:00 pm"; |
|
registry.byId("picker2").set("is24h", false); |
|
}else{ |
|
listItem.set("rightIcon", "mblDomButtonCheckboxOn"); |
|
dom.byId("use24hMsg").innerHTML = "13:00"; |
|
registry.byId("picker2").set("is24h", true); |
|
} |
|
is24h = !is24h; |
|
updateTimeDialog(); |
|
updateTimeListItem(); |
|
}; |
|
|
|
ready(function(){ |
|
updateDateListItem(); |
|
updateTimeListItem(); |
|
// show("dlg1"); |
|
}) |
|
}); |
|
|
|
</script> |
|
|
|
<style> |
|
.mblValuePicker { |
|
display: inline-block; /* to align center */ |
|
} |
|
#dlg1, #dlg2 { |
|
width: 300px; |
|
padding: 0; |
|
} |
|
span.dlgBtn { |
|
padding: 0; |
|
width: 130px; |
|
} |
|
.subtitle { |
|
color: #00e7e6; |
|
font-size: 12px; |
|
} |
|
</style> |
|
</head> |
|
<body style="visibility:hidden;"> |
|
<div id="dlg1" data-dojo-type="dojox.mobile.SimpleDialog"> |
|
<div style="text-align:left;margin:6px"> |
|
<img src="images/tab-icon-19.png" style="vertical-align:middle"> |
|
<span id="msg1"></span> |
|
</div> |
|
<div id="picker1" data-dojo-type="dojox.mobile.ValuePickerDatePicker" data-dojo-props="onValueChanged:onValueChanged1"></div> |
|
<div style="background-color:#bdbabd;margin-top:6px;"> |
|
<span data-dojo-type="dojox.mobile.ToolBarButton" class="dlgBtn" onclick="setDate()">Set</span> |
|
<span data-dojo-type="dojox.mobile.ToolBarButton" class="dlgBtn" onclick="cancel('dlg1')">Cancel</span> |
|
</div> |
|
</div> |
|
|
|
<div id="dlg2" data-dojo-type="dojox.mobile.SimpleDialog"> |
|
<div style="text-align:left;margin:6px"> |
|
<img src="images/tab-icon-19.png" style="vertical-align:middle"> |
|
<span id="msg2"></span> |
|
</div> |
|
<div id="picker2" data-dojo-type="dojox.mobile.ValuePickerTimePicker" data-dojo-props="is24h:true,onValueChanged:onValueChanged2"></div> |
|
<div style="background-color:#bdbabd;margin-top:6px;"> |
|
<span data-dojo-type="dojox.mobile.ToolBarButton" class="dlgBtn" onclick="setTime()">Set</span> |
|
<span data-dojo-type="dojox.mobile.ToolBarButton" class="dlgBtn" onclick="cancel('dlg2')">Cancel</span> |
|
</div> |
|
</div> |
|
|
|
<div id="view" data-dojo-type="dojox.mobile.View"> |
|
<ul data-dojo-type="dojox.mobile.EdgeToEdgeList" data-dojo-props='variableHeight:true'> |
|
<li data-dojo-type="dojox.mobile.ListItem" |
|
data-dojo-props='clickable:true,noArrow:true,onClick:function(){show("dlg1")}'> |
|
Set date |
|
<div id="dateMsg" class="subtitle">2012/02/23</div> |
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" |
|
data-dojo-props='clickable:true,noArrow:true,onClick:function(){show("dlg2")}'> |
|
Set time |
|
<div id="timeMsg" class="subtitle">22:34</div> |
|
</li> |
|
<li id="item1" data-dojo-type="dojox.mobile.ListItem" |
|
data-dojo-props='clickable:true,noArrow:true,rightIcon:"mblDomButtonCheckboxOn",onClick:function(){use24h()}'> |
|
Use 24-hour format |
|
<div id="use24hMsg" class="subtitle">13:00</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</body> |
|
</html>
|
|
|