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 相关文章推荐
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
原生JS实现相邻月份日历
Oct 13 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
Centos7安装swoole扩展操作示例
2020/03/26 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python实现的质因式分解算法示例
2018/05/03 Python
python assert的用处示例详解
2019/04/01 Python
keras中的backend.clip用法
2020/05/22 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
利用python爬取有道词典的方法
2020/12/08 Python
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
经典c++面试题二
2015/08/14 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
教师个人发展总结
2015/02/11 职场文书
开学典礼校长致辞
2015/07/29 职场文书
培训感想范文
2015/08/07 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS
使用MybatisPlus打印sql语句
2022/04/22 SQL Server