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 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
20个最新的jQuery插件
Jan 13 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
php xml文件操作实现代码(二)
2009/03/20 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
理解Python中的With语句
2016/03/18 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Numpy掩码式数组详解
2018/04/17 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
上课迟到检讨书300字
2014/10/15 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
MySQL创建表操作命令分享
2022/03/25 MySQL
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
Django框架模板用法详解
2022/06/10 Python