下拉框筛选时间改变事件

功能介绍:在下拉框中选择不同的时间范围,使两个显示时间范围的input框也同时操作并改变成你选择的那个时间范围的时间。比如你选择一个显示当月时间时,它就会在第一个显示时间的input框里面显示出当月第一天的日期,并在第二个显示时间的input框里面显示当月最后一天的日期。
首先我们给这个控制时间的下拉框一个ID,然后分别给下拉框的每个选项给一个value值,比如:
在这里插入图片描述
然后在获取到下拉框的ID并写一个点击事件:$("#DateC").change(function () {},方法的开始我们先命名几个参数:
var Time = $("#DateC").val(); 获取下拉框的回填数据
var date = new Date(); 获取当天的时间回填
var year = date.getFullYear(); 获取本年的年份
var years = date.getFullYear() - 1; 获取上年的年份
var month = date.getMonth(); 获取当月的月份
var months = date.getMonth() + 1; 获取上月的月份
var day = date.getDate();获取当天的时间,也就是几号
然后就进行判断,并将新增回填到显示时间的两个input框中
if (Time == 1) {
today = date.getFullYear() + “-” + (months) + “-” + (day);
today2 = date.getFullYear() + “-” + (months) + “-” + (day); 拼接当天的时间
$("#bare").val(today);
$("#bae").val(today2);
}
这两个ID分别是那两个显示时间的input的ID名,也就是获取到它们的ID名,并回填一个新的值, 补充一点: 这两个input是封装了一个layui时间插件
在这里插入图片描述
时间插件的使用方法及初始化步骤:
layui.use(‘laydate’, function () {
var laydate = layui.laydate;
laydate.render({
elem: ‘#bare’ //指定元素,获取到input的ID
, value: new Date
, isInitValue: true
});
});
拼接时间的时候还需要注意一点:就是当获取上月或者昨天的日期时,需要用获取到的当天值减一,而当减去一后小于10时,我们还需要在其前面拼接一个零,因为日期一般是8位数的形式,尽管当天的天数为单数,还是会在前面加个0的

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值