注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

基于jquery的Bootstrap框架日期范围选择控件应用

UI fishcity 2214浏览

bootstrap相信很多朋友都知道了,这是一款非常强大的前端开发库(是基于jquery的,使用时一定要先引入jquery库哦)主要是CSS库,同时封装了一部分JS特效,只需构建好html代码并调用相关的类就可以实现了JS效果,可以说是前端开发者的一大福音和快速开发的必备工具!

今天这款是一个日期范围选择器组件引导创建一个下拉菜单,用户可以选择一个日期范围。如果没有选择调用时,它将呈现出两个日历从选择开始日期和结束日期。或者,你可以提供一系列的日期范围,用户可以从相反的选择从日历上的日期选择。如果连接到一个文本输入,选择的日期将插入文本框。否则,你可以接受的选择提供一个自定义回调函数。插件也可以通过设置singledatepicker来作为选择单个日期的选择器。


下面是一个最基本的例子,更多请参考实例文件!

首先,引入核心文件

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker-bs3.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>

构建html

 <form class="form-horizontal">
                <fieldset>
                  <div class="control-group">
                    <div class="controls">
                      <div class="input-prepend input-group"> <span class="add-on input-group-addon"> <i class="glyphicon glyphicon-calendar fa fa-calendar"> </i> </span>
                        <input type="text" style="width: 200px" name="reservation" id="reservation"
										class="form-control" value="03/18/2013 - 03/23/2013" />
                      </div>
                    </div>
                  </div>
                </fieldset>
              </form>

写上JS

$(document).ready(function() {
	$('#reservation').daterangepicker(null,function(start, end, label) {
						console.log(start.toISOString(), end.toISOString(), label);
							});
						});

转载请注明:jQ酷 » 基于jquery的Bootstrap框架日期范围选择控件应用

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。