bootstrap日期插件时间表单

发布时间:2020-12-10作者:小灵龙点击:166

问题描述:

  tp5表单使用搜索的时候会用到搜索今天的数据,昨天的数据。那么几月几号的时间就搜索不到了。也就是要使用bootstrap-datetimepicker插件了。

解决办法:

第一步:下载boostrap-datetimepicker。下载地址  https://github.com/smalot/bootstrap-datetimepicker/archive/master.zip
下载完成后,需要使用到的是

boostrap-datetimepicker.min.css
boostrap-datetimepicker.min.js
js/locales/bootstrap-datetimepicker.zh-CN.js。

可以把这些放在相应的目录里面,在html调用出来。

第二步:html页面的input及javascript.



    <div class="input-group date form_datetime" data-date-format="dd-MM-yyyy" data-link-field="dtp_input1">

      <input class="form-control" size="16" type="text" name="time" value="{$date}" readonly>

      <span class="input-group-addon">

      <span class="glyphicon glyphicon-remove"></span>

      </span>

      <span class="input-group-addon">

       <span    class="glyphicon glyphicon-th"></span>

       </span>

      </div>



            <script type="text/javascript">

                $(function() {

                 $(".form_datetime").datetimepicker({

                   format : 'yyyy-mm-dd',//input 框显示的日期格式。注意:tp5转换的格式分隔符是-

                    minView : 'month',//值的各个数字的含义是:0-分钟;1-小时;2-月;3-年;4-十年

                     language : 'zh-CN',

                     autoclose : true,//选好时间后,日期表单自动关闭

                      startDate : new Date(),//input框显示的显示也是日期选项的当前时间

                      todayBtn : true    //底部显示今日按钮

                     });

                    });



              </script>

标签:bootstrap日期,bootstrap时间