bootstrap-datepicker的基本使用

ゞ浴缸里的玫瑰 2022-06-02 04:50 185阅读 0赞

首先

引入相应css和js：

<link rel="stylesheet" th:href="@{/assets/css/datepicker.css}" />

<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  
    		    })

现在可以看效果了：

![SouthEast][]

选择日期后触发事件：

$('#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();
    			});

[SouthEast]: /images/20220602/70e96df0e3c34c2196fa4b6a00564708.png

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关 crontab的基本使用

作用 crontab是linux的一项系统服务。用来在linux上面定时执行任务。crontab服务又分为系统任务调度和用户任务调度。系统的就是系统周期性所要执行的

太过爱你忘了你带给我的痛/ 2022年11月30日 12:28/ 0 赞/ 153 阅读

相关 SwipeRefreshLayout 的基本使用

SwipeRefreshLayout 可以实现下拉刷新的动作效果，加载内容的时候是很有必要使用的 1.在布局文件 <android.support.

Myth丶恋晨/ 2022年09月25日 06:18/ 0 赞/ 203 阅读

相关 sparksql的基本使用

sparksql是简化编程，是使用sql来分析数据，跟sql的用法很相似，可以直接在命令行里面使用sql语句进行分析，查询，同时也可以使用代码来进行编程，下面我来简单的介绍下使

系统管理员/ 2022年07月12日 23:49/ 0 赞/ 157 阅读

相关 SVN的基本使用

原文地址:http://www.cnblogs.com/xilentz/archive/2010/05/06/1728945.html 一、签入源代码到SVN服务器

川长思鸟来/ 2022年06月17日 11:18/ 0 赞/ 281 阅读

相关数据库的基本使用

mysql数据库 mysql常用语句连接数据库：mysql -u root -p 断开数据库： exit 库操作 1）新增数据库 create datab

末蓝、/ 2022年05月23日 13:18/ 0 赞/ 291 阅读

相关 AFNetworking的基本使用

AFNetworking 本Demo主要演示了通过AFN框架发送GET、POST请求、下载以上传任务,具体参数代码中都加了注释。 // // ViewCo

た入场券/ 2022年05月21日 10:48/ 0 赞/ 157 阅读

相关 OkHttp的基本使用

　　在使用Okhttp之前需要先添加依赖　，它的具体用法是先创建一个OkhttpClient的实例　　OkhttpClient client = new OkHttpCli

电玩女神/ 2022年05月19日 04:43/ 0 赞/ 194 阅读

相关 SourceTree的基本使用

[SourceTree的基本使用][SourceTree] 1. SourceTree是什么拥有可视化界面的项目版本控制软件，适用于git项目管理 w

妖狐艹你老母/ 2022年04月12日 20:58/ 0 赞/ 278 阅读

相关 SourceTree的基本使用

[https://www.cnblogs.com/tian-xie/p/6264104.html][https_www.cnblogs.com_tian-xie_p_62641

梦里梦外;/ 2022年03月06日 10:14/ 0 赞/ 304 阅读

相关 Vuex的基本使用

一、基本用法 1、使用 1. 安装vuex依赖包 npm i vuex - save 1. 导入vuex包 \[ store / index.js \]

今天药忘吃喽~/ 2021年07月25日 21:59/ 0 赞/ 524 阅读