daterange.js 时间段日期段选择器插件

daterange.js 时间段日期段选择器插件

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["dateRange", "dateRange"], function() {
                var dateRange = new pickerDateRange('date_demo3', {
                    aRecent7Days: 'aRecent7DaysDemo3', //最近7天
                    isTodayValid: false,
                    //startDate : '2013-04-14',
                    //endDate : '2013-04-21',
                    //needCompare : true,
                    //isSingleDay : true,
                    //shortOpr : true,
                    defaultText: ' 至 ',
                    inputTrigger: 'input_trigger_demo3',
                    theme: 'ta',
                    success: function(obj) {
                        $("#dCon_demo3").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate);
                    }
                });

            });
        });
    </script>
</head>
<body>
    <h1>Calendar Demo</h1>
    <div class="wrapper">
        <h4>一、选择单天的时间段选择(TA的日期选择器):</h4>
        <div id="dCon_demo3">
            开始时间:2013-04-14
            <br />
            结束时间:2013-04-14
            <br />
        </div>
        <div>
            <a href="javascript:;" id="aRecent7DaysDemo3">最近七天</a>
        </div>
        <div class="ta_date" id="div_date_demo3">
            <span class="date_title" id="date_demo3"></span>
            <a class="opt_sel" id="input_trigger_demo3" href="#">
                <i class="i_orderd"></i>
            </a>
        </div>
        <div id="datePicker"></div>
    </div>
</body>
</html>


立即下载dateRange.js 查看所有js插件

网友评论0

程序员在线工具箱