bootstrap datepicker的基本使用教程


Posted in Javascript onJuly 09, 2019

首先

引入相应css和js:

<link rel="stylesheet" th:href="@{/assets/css/datepicker.css}" rel="external nofollow" />
<script th:src="@{/assets/js/date-time/bootstrap-datepicker.js}"></script>

然后html代码装载控件

<div class="input-group">
       <input class="form-control date-picker" id="endTime" data-date-end-date="0m"
        type="text" placeholder="选择年月"/> 
     <span class="input-group-addon"> 
      <i class="fa fa-calendar bigger-110"></i>
     </span>
     </div>

初始化控件:

$('#endTime').datepicker({ 
     format: 'yyyy-mm',
     startView: 1, maxViewMode: 1,minViewMode:1,
     autoclose :true 
   })

现在可以看效果了:

bootstrap datepicker的基本使用教程

 选择日期后触发事件:

$('#endTime').datepicker({ 
     format: 'yyyy-mm',
     startView: 1, maxViewMode: 1,minViewMode:1,
     autoclose :true 
   }).on("changeMonth", function(e) {
    
    var date_=e.date;
    var year_str = date_.getFullYear();
    var month_str = date_.getMonth()+1;
    if(month_str<10){
     month_str="0"+month_str;
    }
    var endMonth=year_str+"-"+month_str;
      getLitDirection(endMonth);
        getLitSaleTop(endMonth);
        getLitViewTop(endMonth);
        getLitErrorRecovery(endMonth); 
        
   var month_value=year_str+"年"+(date_.getMonth()+1)+"月";
        $("#end_Time").html(month_value); 
      $("#split1").show();
        $("#split2").show();
    
      }).next().on(ace.click_event, function(){
  $(this).prev().focus();
  });

总结

以上所述是小编给大家介绍的bootstrap datepicker的基本使用教程 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
JavaScript常用内置对象用法分析
Jul 09 #Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 #Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 #Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 #jQuery
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 #Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 #Javascript
JavaScript中var的重要性实例分析
Jul 09 #Javascript
You might like
模仿OSO的论坛(三)
2006/10/09 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
Angular工具方法学习
2016/12/26 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
angular ng-click防止重复提交实例
2017/06/16 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
详解vue-cli 接口代理配置
2017/12/13 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python argv用法详解
2016/01/08 Python
详解Python验证码识别
2016/01/25 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
python selenium 获取接口数据的实现
2020/12/07 Python
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
软件测试工程师笔试题带答案
2015/03/27 面试题
实习心得体会
2014/01/02 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
廉洁使者实施方案
2014/03/29 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
外科护士长工作总结
2015/08/12 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书