selectToUISlider日期时间器,通过jquery ui滑块slider制作一个日期进度条拖动效果,拖动的范围结果显示在上方的下拉框。
开始日期
<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事件
}
}
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791