mobiscroll 开始时间不能大于结束时间

使用mobiscroll控件,来达到开始时间不能大于结束时间
html

<div class="time">
                            <div style="height:54px">
                                <span class="starttime">
                                    <div>
                                        <input value="" class="aui-pull-left startTime" readonly="readonly" name="appDate" placeholder="开始时间" id="appDate" type="text" style="display:inline-block;">
                                    </div>
                                </span>
                                <span class="time-middle" ><div>至</div></span>
                                <span class="endtime" >
                                    <div>
                                        <input value="" class="aui-pull-left endTime" readonly="readonly" name="appDate" placeholder="结束时间" id="appDate1" type="text" style="display:inline-block;width:5rem;">
                                    </div>
                                </span> 
                            </div>
                        </div>

加载控件样式 js

<script src="../../script/mobiscroll_004.js" type="text/javascript"></script>
<link href="../../css/mobiscroll_002.css" rel="stylesheet" type="text/css">
<link href="../../css/mobiscroll.css" rel="stylesheet" type="text/css">
<script src="../../script/mobiscroll.js" type="text/javascript"></script>
<script src="../../script/mobiscroll_003.js" type="text/javascript"></script>
<script src="../../script/mobiscroll_005.js" type="text/javascript"></script>
<link href="../../css/mobiscroll_003.css" rel="stylesheet" type="text/css">

js

var currYear = (new Date()).getFullYear();
        // 开始时间
        $("#appDate").mobiscroll().datetime({
            preset : 'datetime',
            theme : 'android-ics light', //皮肤样式
            display : 'modal', //显示方式
            mode : 'scroller', //日期选择模式
            dateFormat : 'yy-mm-dd',
            lang : 'zh',
            showNow : true,
            nowText : "今天",
            startYear : currYear - 10, //开始年份
            endYear : currYear + 10, //结束年份
            onSelect:function(textval,inset){//点击确定按钮
                // 转化时间戳
                var val = new Date(textval).getTime();
                // 判空
                if($('#appDate1').val() != ''){
                    var endtime = new Date($('#appDate1').val()).getTime();
                    if(val > endtime){
                        $('#appDate').val('')
                        api.toast({
                            msg: '开始时间不能晚于结束时间',
                            duration: 2000,
                            location: 'bottom'
                        });

                    }
                }

            },
        });
        $("#appDate1").mobiscroll().datetime({
            preset : 'datetime',
            theme : 'android-ics light', //皮肤样式
            display : 'modal', //显示方式
            mode : 'scroller', //日期选择模式
            dateFormat : 'yy-mm-dd',
            lang : 'zh',
            showNow : true,
            nowText : "今天",
            startYear : currYear - 10, //开始年份
            endYear : currYear + 10, //结束年份
            onSelect:function(textval,inset){//点击确定按钮
                var val = new Date(textval).getTime();
                if($('#appDate').val() != ''){
                    var starttime = new Date($('#appDate').val()).getTime();
                    if(val < starttime){
                        $('#appDate1').val('')
                        api.toast({
                            msg: '结束时间不能早于开始时间',
                            duration: 2000,
                            location: 'bottom'
                        });

                    }
                }

            },
        });

猜你喜欢

转载自blog.csdn.net/qq_36061522/article/details/82886954