这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 时间查询插件的使用方法,结合 bootstrap 进行使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
我从同事那拿来一个时间查询的插件,先记录下来:
首先要引入 js 文件和 CSS 文件,因为我用到了 bootstrap 所以引入的文件有点多:ps: 如果有需要的小伙伴,可以直接跟我说
- <script src="jquery-1.11.2.min.js">
- </script>
- <script src="bootstrap.min.js">
- </script>
- <script src="moment.js">
- </script>
- <script src="daterangepicker.js">
- </script>
- <link href="bootstrap.min.css" rel="external nofollow" rel="stylesheet"
- type="text/css" />
- <link href="daterangepicker-bs3.css" rel="external nofollow" rel="stylesheet"
- type="text/css" />
- <link href="http://www.jq22.com/jquery/font-awesome.4.6.0.css" rel="external nofollow"
- rel="stylesheet">
下面是 div 部分:
- <div class="col-xs-12">
- <!--日期查询组件-->
- <label class="col-sm-1 control-label tj">
- 发布时间:
- </label>
- <div class="col-xs-4 tj">
- <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" readonly style="width: 200px" name="reservation" id="reservation"
- class="form-control" value="请选择查询日期" />
- </div>
- </div>
- </div>
- </fieldset>
- </form>
- </div>
- </div>
最后是 JS 部分:
- <script type="text/javascript">
- //日期查询js组件
- $(document).ready(function() {
- $('#reservation').daterangepicker(null,
- function(start, end, label) {
- console.log(start.toISOString(), end.toISOString(), label);
- });
- });
- var rqstart = "";
- var rqend = "";
- //日期时间方法
- $(document).ready(function() {
- $('input[name="reservation"]').daterangepicker({
- /*format: 'YYYY-MM-DD',
- startDate: '2013-01-01',
- endDate: '2013-12-31'*/
- },
- function(start, end, label) {
- //alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
- start = start.format('YYYY-MM-DD'); //.format()把任意数据转换成字符串
- end = end.format('YYYY-MM-DD');
- /* 开始结束时加*/
- rqstart = start;
- rqend = end;
- });
- });
- </script>
效果图:
来源: http://www.phperz.com/article/17/0723/334241.html