限制日期范围判断查询

3 篇文章 0 订阅

限制日期范围判断查询

当前是表格是暂无数据的:
这里去通过以下几个步骤去完成数据的查询效果、
1、在选择日期选择项时,2和3要显示相应的数据回应,
比如,这里默认为显示当天的选择项,这时2与3会相应的显示当天的日期,以此类推
最后便点击查询按钮,查找到对应的数据进行数据反馈
在这里插入图片描述
比如现在选择是本月的选择项,2与3显示当月的月初和月末的日期,查询到的数据反馈也是当月日期的数据
在这里插入图片描述
同等方式,在两个日期内包含内的所有数据将反馈显示
在这里插入图片描述
HTML代码演示:
此处定义了7条option选择项,此处将Value回填1-7的数字后期判断所需,也可通过标签索引值获取对应的option值,下面定义了3条input标签信息,其中前2条则是页面显示的2与3,将日期格式显示到年月日当天日期,而最后一条作为隐藏域用与日期判断准确到时与分
在这里插入图片描述
定义日期选择项的监听事件:
向获取该select标签上的ID
在创建变量接收定义日期信息
之后便是判断select当前选择 的是哪个option选择项了,
上图可见,在option中的value添加1-7的数字,这里就通过这1-7的数字进行判断
当选择option时,select上 Value获取相应信息反馈,当SelectLength=1时,将函数中定义的日期字段,拼接到ID相应的input中并展示数据结果,当等于2、3、4…时相应的去拼接所需的日期字段并反馈到页面中,如下所示:
在这里插入图片描述
在这里插入图片描述
在查询按钮上定义一个点击函数并在函数中添加所需的字段来接收对应的数据反馈
如下图所示:
创建ChaxunDindan(Onck,A,b)函数其中括号的三个参数有何作用呢?
Onck: 接收前面图中Table标签上的ID ;A: 接收“DaM1”input数据回馈 ;B:接收“DaM3”input数据回馈,这里我们可以不去获取隐藏input的信息,可直接就获取页面上所示的两个input的值,我这是效果所需。
此处定义变量,为什么不去直接获取ID呢?而是通过拼接一个参数。
因为在做效果功能时,不一定一个函数方法就指单一,一个区域调用,这是为了方便函数一对多的使用,而不是繁琐的创建相同的方法,注意的是,如果传递到后台的路径不一致时,方法一致,可将URL也定义个参数来接收
在这里插入图片描述

在这里插入图片描述
后台展示:
在这查询方法中,定义了两个string字符串参数1 和 2部分所示,来接收前端传递的两个日期信息来作数据判断的条件。
红圈部分所示:
先将两个字段不为空,在将字段强制转为为DateTime日期格式,如果不强制转换的话,两个字符串参数没办法对应SQL数据字段,应为数据类型冲突,会报错,所以要将数据格式转换后在进行数据的判断,最终查询到对应的判断条件的数据信息
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Js双日历控件,在一个网页上同时显示两个日期选择器,写成了封装类,方便使用者调用。同时美化的相当不错。   包括了以下函数:   1、2012——2020年节假日信息(包括节假日前1~3天/后1~3天)   2、格式化数字,不足两位前面补0   3、将日期对象/日期字会串格式化为指定日期字符串   4、将日期字符串格式化为数字   5、获取目标元素针对于文档的位置   6、元素选择器   7、查找元素位置   8、判断目标元素是否包含指定的className      关于一些日历调用的参数说明:Calendar({    id: "#J_date_1", //触发显示日历元素ID    isPopup: !0, //弹出式日历    isPrevBtn: !0, //显示上月按钮    isNextBtn: !0, //显示下月按钮    isCloseBtn: !0, //显示关闭按钮    isHoliday: !0, //节假日特殊显示    isHolidayTips: !0, //显示节假日1~3天/后1~3天信息    isDateInfo: !0, //显示日期信息    isMessage: !0, //有日历提示信息    isCalStart: !0, //标记为开始时间    dateInfoClass: "date-info-start", //开始时间icon样式    range: {mindate: "2011-09-01", maxdate: "2020-12-31"},//限制范围(当天——2020-12-31)    count: 2, //日历个数    monthStep: 1, //切换上下月日历步长    onSelectDate: fnSelectDate, //选择日期回调方法    onClose: fnClose //关闭日历回调方法

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值