对data标签获取到的时间进行比较

前言

data(时间属性)是HTML5中新增的一个属性,常用于选择日期、时间,但这个是无法通过属性去限制其不能选择过去的时间的,这个时候就需要我们在JQ中对其进行比较了!

由于放效果图,需要在数据库里面添加一条新数据,有点麻烦,且小编目前不想写一个页面Demo,所以目前就不放了(后续心情好了会给补上!)。

话不多说,搬代码!

这里我们要效果呢就是选择好时间后点击确认验收按钮时将对选择的时间进行判断,若选择的日期大于当前时间就提示Ok,反之则提示不能选择过去的时间

HTML代码

<div id="InstallDiv">
  <span>上门安装时间</span>
  <span>
    <input id="InstallTime" type="date">
  </span>
  <span>
    <input id="InstallTimeBtn" type="submit" value="确认验收">
  </span>
</div>

这里小编主要放了放了两个重要控件,一个id为InstallTime type为date的input控件和一个id为InstallTimeBtn的按钮

jQuery代码

$("#InstallTimeBtn").click(function () {
  var InstallTime = $("#InstallTime").val();   //获取data控件中选择的日期

  InstallDate=Date.parse(new Date(InstallTime.replace(/-/g, "/"))); //将选择的日期转换为可进行计算的格式(具体是上门意思小编也不太清楚暂且就叫它可计算的格式,了解的同志还望指点指点)

  var date=new Date().toLocaleDateString();//获取当前时间

  date=Date.parse(new Date(date.replace(/-/g, "/")));//将当期日期转换为可计算的格式

  if(InstallDate-date>=0)//判断选择的日期减去当前时间是否不小于零
  {
    alert("OK")//不小于零就表示选择的日期比当前日期要大,这个时候我们弹出“OK”
  }
  else
  {
    alert("不能选择过去的时间!");//不小于零则表示选择的日期比当前日期要小,这个时候我们弹出“不能选择过去的时间”
  }
})

后言

这个控件小编也是第一次使用,之前也没在jQuery中对时间比较,所以对‘replace(/-/g, "/")’也不是很清楚,有清楚的同志可以在下方留言指点指点。

写得比较浅,有啥错误还望大家指出,希望对大家有帮助!

猜你喜欢

转载自www.cnblogs.com/121317RBN/p/9068546.html
今日推荐