日期插件datepicker的使用

2021-08-11 11:01:04 阅读：311 来源： 互联网

标签：datepicker datePicker 插件 month resouce 日期 resArr day select

1、下载日期插件datepicker的moment.js、jquery-datePicker.min.js、index.css

2、编写日期插件样式

<div class="date_select_box_resouce" style="line-height: 80px;">
       <div class="date_select_title_resouce">日期：</div>
        <div class="date_select_value_resouce" >
            <input class="datePicker_box"  name="todayDate" type="text" placeholder="请选择日期..." v-model='todayDate' readonly />
        </div>
</div>

　　日期插件样式：

/* 日期空间框的样式 */
	.date_select_box_resouce {
	    font-size: 24px;
	    display: flex;
	    line-height: 52px;
	    margin-top: 20px;
	}
	
	.date_select_title_resouce {
	    width: 100px;
	}
	
	.date_select_value_resouce {
	    flex: 1;
	}
	
	.date_select_box_resouce .date_select_value_resouce select, .date_select_box_resouce .date_select_value_resouce input {
	    width: 252px;
	    height: 50px;
	    line-height: 50px;
	    padding: 8px;
	    box-sizing: border-box;
	    background-color: rgba(7, 27, 34, 85%);
	    color: #FFFFFF;
	    font-size: 24px;
	    border: none;
	}

　　效果如下：

3、代码实现

$('.datePicker_box').on('click', function () {
	var _this = this;
	if(!$(this).next('[name="datePicker"]').length) {
		$(this).after("<div class='datePicker-x' name='datePicker'></div>");
			datePicker = $('.datePicker-x').datePicker({
				reportTimeType: 5, // 4代表小时、5代表天、6代表周、7代表月、8代表季、9代表年
				startDom: $(_this),  // 开始时间要赋值的DOM元素
				format: 'YYYY-MM-DD HH:mm:ss',
				isFast: false,   // 是否显示快速选择的选项
				isDouble: false,   // 是否双选择的日历
				disabledDate: false,    // 是否禁用以后的时间
				yes: function (startTime, endTime) {    // 成功赋值前的回调可改变赋值的时间格式
					catchzbList(startTime);
				},
			});
	}else {
		if($(this).next('[name="datePicker"]').hasClass('hide')) {
			$(this).next('[name="datePicker"]').removeClass('hide');
			datePicker.render();
		}else {
			$(this).next('[name="datePicker"]').addClass('hide');

		}
	}
});

　　效果如下：

时间处理（vue写法）：

mounted: function() {
        let that = this
        //时间处理
		let year = new Date().getFullYear()
        let month = new Date().getMonth() + 1
        let day = new Date().getDate()
        month = month > 9 ? month.toString() : '0' + month
        day = day > 9 ? day.toString() : '0' + day
        this.year = year
        this.month = month
        this.day = day
        //执行的
        window.catchReList = this.getResourceList2;
        //设置弹窗页面的显示位置
        that.markObj.forEach(i=>{
        	if(i.name=='resources'){
        		that.mark={top:i.top,right:i.right,left:i.left};
        	}
        })
 }

　　接口调用（vue写法）：

getResourceList2: function(selDate, pageNum = 1) { //查询保电资源投入列表
    	let that = this
    	var currDate= "";
        if(selDate != '' && selDate != undefined){
        	currDate = selDate.substring(0,10);
        }else{
        	currDate=that.year+'-'+that.month+"-"+that.day;
        }
        //每次调用前对数组进行置空
        this.todayDate = currDate
    	Post(API.queryReourceList, { pageNum: pageNum, pageSize: 9 , pageEvent: Vm.pageEvent, selDate: currDate}, function(res) {
    		let resArr = JSON.parse(res.resultValue)
    		console.log(resArr);
    		that.resourceList = resArr.items
    		that.pageInfo.pageNum = resArr.pageNum
    		that.pageInfo.maxNum = resArr.maxPage
    		that.pageInfo.toalNum = resArr.toalNum
    		
    		that.numberArrFun(resArr.pageNum, resArr.maxPage)
    		
    	})
   }

更多java、大数据学习面试资料，请扫码关注我的公众号：

标签：datepicker,datePicker,插件,month,resouce,日期,resArr,day,select
来源： https://www.cnblogs.com/javaydsj/p/15127248.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

日期插件datepicker的使用