日期选择器（年、季、月、周）展示

灰太狼 2024-04-06 14:18 111阅读 0赞

#### 目录 ####

*  一、引入文件
 *   *  1、引入的css
     *  2、引入的js
     *  3、文件地址
 *  二、datetimepicker用法总结
 *   *  1、format（日期时间格式）
     *  2、weekStart 一周从哪一天开始
     *  3、startDate 开始时间
     *  4、endDate 结束时间
     *  5、daysOfWeekDisabled 一周的周几不能选
     *  6、autoclose 选完时间后是否自动关闭
     *  7、startView 选完时间首先显示的视图
     *  8、minView 最精确的时间
     *  9、maxView 最高能展示的时间
     *  10、todayBtn 当天日期按钮
     *  11、todayHighlight 当天日期高亮
     *  12、keyboardNavigation 方向键改变日期
     *  13、language 语言
     *  14、forceParse 强制解析
     *  15、minuteStep 步进值
     *  16、pickerPosition 选择框位置
     *  17、showMeridian 是否显示上下午
     *  18、initialDate 初始化日期时间
     *  19、remove 清除datetimepicker设置内容
 *  三、年、季、月效果代码
 *  四、周效果代码

## 一、引入文件 ##

### 1、引入的css ###

### 2、引入的js ###

### 3、文件地址 ###

[引入的前端Html和JS下载地址][Html_JS]

## 二、datetimepicker用法总结 ##

### 1、format（日期时间格式） ###

控制日期的显示方式，属性具体说明如下:  
yyyy 年，全称。如2017  
yy 年，简称。只显示后面2位。如17  
MM 月，全称。月份显示为英文/中文。如April/四月  
M 月，简称。如Apr/四  
mm 月，全称。如03  
m 月，简称。如3  
HH 时，全称，12小时制。前面补0，如05  
H 时，简称，12小时制。前面不补0，如5  
hh 时，全称，24小时制。前面补0  
h 时，全称，24小时制。前面不补0  
ii 分，全称，前面补0  
i 分，全称，前面不补0  
ss 秒，全称，前面补0  
s 秒，全称，前面不补0  
P 大写的P，12小时制且大写’AM’或’PM’  
p 小写的p，12小时制且小写’am’或’pm’

### 2、weekStart 一周从哪一天开始 ###

Integer类型  
默认值：0  
0（星期日）~6（星期六）

$("#lkm").datetimepicker({
        
            weekStart: 1
    });

### 3、startDate 开始时间 ###

Date类型  
默认值：开始时间

### 4、endDate 结束时间 ###

Date类型  
默认值：结束时间

### 5、daysOfWeekDisabled 一周的周几不能选 ###

String, Array类型  
默认值：’ ', \[ \]

0（星期日）~6（星期六）

$("#lkm").datetimepicker({
        
            daysOfWeekDisabled: '0,1,2'
    });

### 6、autoclose 选完时间后是否自动关闭 ###

Boolean类型  
默认值：false

当选择一个日期后是否立即关闭日期选择器。

### 7、startView 选完时间首先显示的视图 ###

Number, String类型  
默认值：2, ‘month’  
![在这里插入图片描述][617756bdd21b43e2b8d7780a816137cb.png]

### 8、minView 最精确的时间 ###

Number, String类型  
默认值：0, ‘hour’

### 9、maxView 最高能展示的时间 ###

Number, String类型  
默认值：4, ‘decade’

### 10、todayBtn 当天日期按钮 ###

Boolean, “linked”类型  
默认值：false’

### 11、todayHighlight 当天日期高亮 ###

Boolean类型  
默认值：false

### 12、keyboardNavigation 方向键改变日期 ###

Boolean类型  
默认值：false

是否允许通过方向键改变日期。

### 13、language 语言 ###

String类型  
默认值：’en’  
中文：’zh-CN’ (但需要导入bootstrap-datetimepicker.zh-CN.js。)

### 14、forceParse 强制解析 ###

Boolean类型  
默认值：true

强制解析成你规定的格式（format），我没有尝试过。

### 15、minuteStep 步进值 ###

Number类型  
默认值：5

此数值被当做步进值用于构建小时视图。就是最小的视图是每5分钟可选一次。是以分钟为单位的。

### 16、pickerPosition 选择框位置 ###

String类型  
默认值：’bottom-right’

还支持 : ‘bottom-left’，’top-right’，’top-left’

### 17、showMeridian 是否显示上下午 ###

Boolean类型  
默认值：false

在日期和小时选择界面，出现上、下午。

### 18、initialDate 初始化日期时间 ###

Date or String类型  
默认值：new Date()

### 19、remove 清除datetimepicker设置内容 ###

$('#periodName').datetimepicker('remove');

## 三、年、季、月效果代码 ##

> 季度思路：两个input分别获取年和季度，然后进行字符串拼接。

1、html

<div class="form-group">
    	<label class="control-label">周期类型：</label>
    	<div class="control-inline">
    		<select class="form-control width-230" name="demoType" id="demoType">
    			<option value="">请选择...</option>
    			<option value="年度">年度</option>
    			<option value="季度">季度</option>
    			<option value="月度">月度</option>
    		</select>
    	</div>
    </div>
    <div class="form-group">
    	<label class="control-label">周期：</label>
    	<div class="control-inline">
    		<input type="text" id="demoDate" class="form-control width-230" >
    		<select class="form-control width-230" name="demoDate1" id="demoDate1" style="display:none">
    			<option value="">请选择季度...</option>
    			<option value="第一季度">第一季度</option>
    			<option value="第二季度">第二季度</option>
    			<option value="第三季度">第三季度</option>
    			<option value="第四季度">第四季度</option>
    		</select>		
    		<select class="form-control width-230" name="demoDate2" id="demoDate2" style="display:none">
    			<option value="">请选择周...</option>
    		</select>					
    	</div>
    </div>

2、js

$('#demoType').change(function () {
        
    				//清除文本框内容
            		$('#demoDate').val('');
    				$('#demoDate').val('');
    				//清除datetimepicker设置内容
    				$('#demoDate').datetimepicker('remove');
    				$('#demoDate1').hide();
    				var date =new Date();
            		var type=$('#demoType').val();
    				if(type=='年度'){
        					
    					$("#demoDate").datetimepicker({
        
    					format:"yyyy",
    					keyboardNavigation:true,
    					initialDate: date,
    					autoclose:true,
    					minView:4,
    					startView:4,
    					language:"zh-CN"
    					});
    					
    				}else if(type=='季度'){
        
    					$("#demoDate1").show();										
    					$("#demoDate").datetimepicker({
        
    					format:"yyyy",
    					keyboardNavigation:true,
    					initialDate: date,
    					autoclose:true,
    					minView:4,
    					startView:4,
    					language:"zh-CN"
    					});	
    					
    				}else if(type=='月度'){
        
    					$("#demoDate").datetimepicker({
        
    					format:"yyyy-mm",
    					autoclose:true,
    					minView:3,
    					startView:3,
    					keyboardNavigation:true,
    					initialDate:date,				
    					language:"zh-CN"
    					});
    				}else if(type=='周'){
        
    					$("#demoDate2").show();										
    					$("#demoDate").datetimepicker({
        
    					format:"yyyy",
    					keyboardNavigation:true,
    					initialDate: date,
    					autoclose:true,
    					minView:4,
    					startView:4,
    					language:"zh-CN"
    					});	
    					
    				}else{
        
    					$("#demoDate1").hide();
    					$("#demoDate2").hide();
    				}
    		});

## 四、周效果代码 ##

[Html_JS]: https://download.csdn.net/download/lkm987654321/86745602
[617756bdd21b43e2b8d7780a816137cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/22e56cbb8bf24ac8aa507edf819f0da0.png