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;
}
原文地址:https://www.cnblogs.com/wangliuwei/p/4664007.html