jQueryUI滑块拖动日期范围选择器

来源:https://www.sucaihuo.com/js/832.html 2016-03-07 18:46浏览(1485) 收藏

selectToUISlider日期时间器,通过jquery ui滑块slider制作一个日期进度条拖动效果,拖动的范围结果显示在上方的下拉框。
jQueryUI滑块拖动日期范围选择器
分类:日期时间 > 年月时间段 难易:中级
查看演示 下载资源 下载积分: 20 积分

开始日期

<label for="valueA">Start Date:</label>
<select name="valueA" id="valueA">
    <optgroup label="2003">
        <option value="01/03">Jan 03</option>
        <option value="02/03">Feb 03</option>

        <option value="03/03">Mar 03</option>
        <option value="03/03">Apr 03</option>
        <option value="03/03">May 03</option>
        <option value="06/03">Jun 03</option>
        <option value="07/03">Jul 03</option>
        <option value="08/03" selected="selected">Aug 03</option>

        <option value="09/03">Sep 03</option>
        <option value="10/03">Oct 03</option>
        <option value="11/03">Nov 03</option>
        <option value="12/03">Dec 03</option>
    </optgroup>
</select>

结束日期

<label for="valueB">End Date:</label>

引入selectToUISlider日期范围插件

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script>

<link rel="stylesheet" href="css/jquery-ui-1.7.1.custom.css" type="text/css" />
<link rel="Stylesheet" href="css/ui.slider.extras.css" type="text/css" />
$('select').selectToUISlider({
    labels: 12, //设置标签的显示个数  
    sliderOptions: {
        change: function(e, ui) { //定义change事件  

        }
    }
});
标签: 日期范围滑块
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2