Appcan 日期控件
某个页面的onclick事件
<div id="topSendDate" class="ub ub-f1" onclick="appcan.window.open({name:'dateSelect',dataType:0,data:'dateSelect.html'});">
</div>
dateSelect.html
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
<link rel="stylesheet" href="dateSelect_content/css/main.css">
</head>
<body class="um-vp " ontouchstart>
<div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
<!--header开始-->
<div id="header" class="uh ub bc-text-head-feedback bc-head">
<div class="nav-btn" id="nav-left"><返回</div>
<h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">送货时间选择</h1>
<div class="nav-btn nav-bt" id="nav-right"></div>
</div>
<!--header结束--><!--content开始--> <div id="content" class="ub-f1 tx-l"> </div>
<!--content结束--> </div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
</body>
<script>
appcan.ready(function() {
var titHeight = $('#header').offset().height;
appcan.frame.open("content", "dateSelect_content.html", 0, titHeight);
window.onorientationchange = window.onresize = function() {
appcan.frame.resize("content", 0, titHeight);
}
});
appcan.button(".nav-btn", "btn-act", function() {
appcan.window.close(-1);
}) function closeNow () {
appcan.window.close({
aniId:0,
animDuration:1000
});
} </script>
</html>
dateSelect_content.html
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
<link rel="stylesheet" href="feedback_content/css/main.css">
</head>
<body class="um-vp bc-bg-f8" ontouchstart>
<div class="ub ub-ver uinn-a3 ub-fv">
<div class="ub-ver uinn-at1">
<div class="uinput ub ub-f1 bc-border uba">
<input id="dateID" placeholder="请选择日期！" type="text" class="ub-f1" onclick="uexControl.openDatePicker(year,month,day);">
</div>
<div class="uinput ub ub-f1 bc-border uba umar-t" >
<input id="timeID" placeholder="请选择时间！" type="text" class="ub-f1" onclick="uexControl.openTimePicker(hour,minute)">
</div> <div class="ub ub-ver">
<div class="uinn-at1">
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn-feedback uc-a1-feedback fw-b" id="submit1" onclick="submitFeedback()">
确认
</div>
</div>
</div>
</div>
</div>
<input id="userIDHide" type="hidden" name="userIDHide" value="">
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/common.js"></script>
<script src="js/imitate.js"></script>
<script src="js/zy_control.js"></script>
</body>
<script> var day;
var month;
var year;
var hour;
var minute; appcan.ready(function() {
appcan.initBounce();
loadDate(); uexControl.cbOpenDatePicker=function(opCode,dataType,data){
var obj = eval('('+data+')');
$("#dateID").val(obj.year+"-"+obj.month+"-"+obj.day);
}; uexControl.cbOpenTimePicker=function(opCode,dataType,data){
var obj = eval('('+data+')');
$("#timeID").val(obj.hour+":"+obj.minute);
};
}) function loadDate () {
var myDate = new Date();
day = myDate.getDate();
month = myDate.getMonth()+1;
year = myDate.getFullYear();
hour = myDate.getHours();
minute = myDate.getMinutes();
$("#dateID").val(year+"-"+month+"-"+day);
$("#timeID").val(hour+":"+minute);
} function submitFeedback() {
appcan.window.evaluateScript('dateSelect','closeNow()');
appcan.window.evaluatePopoverScript('submitOrder','submitOrder_content','$("#topSendDate").text("'+$("#dateID").val()+' '+$("#timeID").val()+'")') }
function alertvalue (value) {
alert(value);
}
</script>
</html>
main.css
.c-wh-pLG{
background-color:#f2f2f2;
}
.uinn-pLb1{
padding-bottom:0.7em;
}
.userImg{
background-image:url('images/userImg.png');
}
.pwdImg{
background-image:url('images/pwdImg.png');
}
.b-gra3{
border-color:#d8d8d8;
}
.uinn-a4{
padding:0.9em 0.625em 0.8125em 0.625em;
}
.t-gra2 {
color: #d8d8d8;
}
.mar-ar2 {
margin-right: 0.375em;
}
.uinn-a5 {
padding: 0.8125em 0.625em 0.9em 0.625em;
}
.uinn-a6 {
padding: 1em 0.65em 0 0.65em;
}
.uinn-at2{
padding-top:0.75em;
}
.uinn-at1{
padding-top:1em;
}
.c-wh{
background-color: white;
}
.bc-text-head-feedback {
color: #FF5D5E;
}
.bc-btn-feedback {
background-color: #FF5959;
}
.uc-a1-feedback {
-webkit-border-radius: 0.2em;
border-radius: 0.2em
}
.fw-b{
font-weight: bold
}
.bc-bg-f8 {
background-color: #F8F8F8;
}
.uinput input, .uinput textarea {
background: #FFFFFF ;
}
.umar-t {
margin-top:1em;
}
Appcan 日期控件的更多相关文章
- bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法
筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...
- my97DatePicker日期控件——日期输入框联动，使用focus使第二个输入框没展示出日期控件
描述问题场景: 1.jquery使用的版本是jquery-1.7.2.min.js 2.代码不是写在页面上的,是通过事件后追加的 <!DOCTYPE html> <html> ...
- 怎样使用My97日期控件
有网友说无法使用My97日期控件,Insus.NET测试一下,是可以正常使用了. 在ASP.NET MVC环境中测试. 去官网下载My97日期控件程序包: 下载解压之后,把程序的目录拷贝至projec ...
- jQuery Datepicker日期控件
datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...
- jQuery LayDate 日期控件
她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封 ...
- JQuery datepicker 日期控件设置
datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...
- bootstrap-datetimepicker 日期控件的开始日期
今天做日期控件,需求要求设置一个时间范围限制,选择从今天开始的日期才可以选择,今天以前都不可以选择 主要体现在bootstrap-datetimepicker控件下面的2个日期参数 weekStart ...
- easyui 日期控件清空值
最近用了Easyui的日期控件datebox,项目中要将选中值清空,于是就研究了一下. 1,调用方法清空 $('#yourId').combo('setText',''); 2,更改js文件 从官网下 ...
- WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...
随机推荐
- Akka边学边写（1）-- Hello, World!
Akka Akka是什么呢?直接引用Akka站点上面的描写叙述吧: Akka is a toolkit and runtime for building highly concurrent, dist ...
- GFS读后笔记
GFS读后笔记 Q&A 为什么存储三个副本?而不是两个或者四个? ANS: 可能取得某些平衡点 Chunk的大小为何选择64MB?这个选择主要基于哪些考虑? ANS: GFS主要支持appen ...
- Invalid default value for 'created_at'
https://github.com/laravel/framework/issues/15144 https://stackoverflow.com/questions/30555844/larav ...
- abp项目 从sql server迁移至mysql
官方资料:https://aspnetboilerplate.com/Pages/Documents/EF-MySql-Integration 实验发现,还差了两步 整理一下,步骤如下: 1.引用My ...
- socket 主机地址相关的函数
#include <arpa/inet.h> int inet_aton (const char *name, struct in_addr *addr) 将ipv4地址从数字点的形式转化 ...
- JPlayer-MP3播放器（带播放列表）
第一篇随笔,写的不好的地方,各位不要见笑.其他的也不多说了,下面是我在工作中用的一个基于JQuery开源的插件,官方地址:http://www.jplayer.org/.先看下要实现的效果图: 首先引 ...
- UwpDesktop！WPF也能开发Surface Dial
原文:UwpDesktop!WPF也能开发Surface Dial 前段时间巨硬发布了一款新的输入设备Surface Dial,配合Surface Studio使用简直炫酷到没朋友. 本人由于公司业务 ...
- UBUTUN 通过蓝牙连接Hoary和诺基亚手机
通过蓝牙连接Hoary和诺基亚手机 这个how to已经用Hoary.诺基亚6630和一个道尔芯片(Dongle)蓝牙(Usb蓝牙)测试过了.通过这个How to,你可以:-通过蓝牙,从你的电脑发送文 ...
- Win10《芒果TV》跨年邀你嗨唱，同步直播《湖南卫视2017-2018跨年演唱会》
由天天兄弟.快本家族联袂主持,不容错过的年度盛典<湖南卫视2017-2018跨年演唱会>将于2017年12月31日19:30起由芒果TV同步直播,果妈备上礼物邀您一起跨年嗨唱. 跨年邀你嗨 ...
- PHP开发框架 Laravel
Laravel 是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁.富 ...