如何做到多个选矿选择不同的时间

分类：HTML5+

HTML5+ HBuilder mui

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <link rel="stylesheet" type="text/css" href="css/title&bottomTheme.css" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
             // H5 plus事件处理  
            function plusReady() {}  
            if (window.plus) {  
                plusReady();  
            } else {  
                document.addEventListener("plusready", plusReady, false);  
            };  

            function pickDate() {  
                plus.nativeUI.pickDate(function(e) {  
                    var input1 = document.getElementById("input1");  
                    var input2 = document.getElementById("input2");  
                    var d = e.date;  
                    input1.value = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();  
                    input2.value = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();  
                    console.log("选择的日期：" + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());  
                }, function(e) {  
                    console.log("未选择日期：" + e.message);  
                });  
            }  
        </script>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">select_time</h1>  
        </header>  
        <div class="mui-content">  
            <input onclick="pickDate()" type="text" name="input1" id="input1" value="" />  
            <label for="input1">选择时间</label>  
            <input onclick="pickDate()" type="text" name="input2" id="input2" value="" />  
            <label for="input2">选择时间</label>  
        </div>  
    </body>  

</html>

需求：2个或者多个选框，需要输入的时间不同。
问题：点击其中一个，则2个或者多个都自动改成一样的时间。如何做到多个选框的时间互不干扰？（现在无论点击哪一个，所得到的值都会自动赋给其他的选框。偶买噶的，为什么会这样呢？如何解决呢？在此先谢过！）

2015-03-25 18:11 负责人:无分享

2 个回复

DCloud_UNI_FXY

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <link rel="stylesheet" type="text/css" href="css/title&bottomTheme.css" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
             // H5 plus事件处理  
            function plusReady() {}  
            if (window.plus) {  
                plusReady();  
            } else {  
                document.addEventListener("plusready", plusReady, false);  
            };  

            function pickDate(input) {  
                plus.nativeUI.pickDate(function(e) {  
                    var d = e.date;  
                    input.value = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();  
                    console.log("选择的日期：" + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());  
                }, function(e) {  
                    console.log("未选择日期：" + e.message);  
                });  
            }  
        </script>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">select_time</h1>  
        </header>  
        <div class="mui-content">  
            <input onclick="pickDate(this)" type="text" name="input1" id="input1" value="" />  
            <label for="input1">选择时间</label>  
            <input onclick="pickDate(this)" type="text" name="input2" id="input2" value="" />  
            <label for="input2">选择时间</label>  
        </div>  
    </body>  

</html>

烟雨江南 (作者)

非常感谢。。。原来是这么搞就行。

2015-03-25 20:12

Danny - QQ125904483

//text日期选择  
//默认当前日期，限定2000-01-01至2020-12-31之间  
function ythDatePicker(txtCtl) {  
    var ctl = txtCtl;  
    this.txtCalendar = function() {  
        ctl.addEventListener('tap', function() {  
            var nowDate = new Date();  
            //nowDate.setFullYear(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate());  
            var minDate = new Date();  
            minDate.setFullYear(2000, 0, 1);  
            var maxDate = new Date();  
            maxDate.setFullYear(2020, 11, 31);  
            plus.nativeUI.pickDate(function(e) {  
                var dt = e.date;  
                ctl.value = dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate();  
            }, function(e) {  
                //没有选择日期  
                ctl.value = '';  
            }, {  
                title: "请选择日期",  
                date: nowDate,  
                minDate: minDate,  
                maxDate: maxDate  
            });  
        });  
    };  
};

mui.plusReady(function() {  
    var startdate = new ythDatePicker(document.getElementById('untdConStartDate'));  
    var enddate = new ythDatePicker(document.getElementById('untdConEndDate'));  
    startdate.txtCalendar();  
    enddate.txtCalendar();  
});

该问题目前已经被锁定, 无法添加新回复

如何做到多个选矿选择不同的时间

2 个回复

公告

相关问题

如何做到多个选矿选择不同的时间

与内容相关的链接

2 个回复

公告

相关问题