Ejay Ejay - 4 months ago 22
Javascript Question

Using jquery with expiry dates

Can I please get any help finishing this code I did for my website. I'm using jquery and what this code does is its checking the recert date (expiry date) of an application first before a customer can re-apply again, so basically they can only re-apply within 4 weeks of their current application expiry date.

e.g. if a person application expires Aug 31 2016 that means they can only re-apply from Aug 3 2016 to Aug 31 2016 with 4 weeks to be exact. An application last for 3 years.

I provided my code and its working but I don't know if this is the right conditions and all it does is just hide the apply button if expiry date is still not up.

$(document).ready(function(){

var current = new Date();
var expiry = new Date($("#mcs_nextrecertdate").val());

if(current.getTime() > expiry.getTime()){
$("#NextButton").show();
}
else {
$("#NextButton").hide();
}


EDIT: Im testing the codes I receive from the answers based on these dates first can re-apply with 27 august 2016 and the second is a date that can't re-apply yet 20 July 2019

Leo Leo
Answer

Given your question and explanation of your problem, I'd like to point out a few observations I've made

1. Date validation

var expiry = new Date($("#mcs_nextrecertdate").val());

Whatever #mcs_nextrecertdate is, I'll assume you've already made sure that this "input" element's value is correctly formatted. Otherwise you'll get a JS script error and the whole thing will break

2. Incorrect logic

Based on your explanation, a user can only re-certify WITHIN 4 weeks of the current application's expiry date. I'll assume that #NextButton is a submit button that triggers the new application. Based on that, this expression is wrong...

if(current.getTime() > expiry.getTime()){...}

because you're telling your app to allow users to apply for a certification AFTER the current application has expired, NOT WITHIN 4 weeks after expiration, in other words, users can ONLY re-apply after they're application expired...not before.

3. Server validation

This is just an assumption. I'll also assume this "client-side logic" is just to offer a good user experience of your app and that you are running proper server-side validation otherwise advanced users like me can easily bypass client-side validation, cheat/hack these "constraints" and even bring your application data to an inconsistent state.

Correct Logic

In order to make sure users can re-apply within 4 weeks prior to the current expiry date you need to do the following...

var now = new Date();
var expiry = new Date($("#mcs_nextrecertdate").val());//assuming this has a valid date
var startValidAppDate = new Date($("#mcs_nextrecertdate").val());

//set valid application dates
startValidAppDate.setTime(expiry.getTime() - (7 * 4 * 24 * 60 * 60 * 1000));//4 weeks to milliseconds

if(now < expiry && now > startValidAppDate){
     //ok to apply
     $("#NextButton").show();
}

Again, ALWAYS make sure you have strong validation on the server. Here's a working snipper...

$(function(){
        $('#txtExpiryDateParent').datetimepicker({
                format: "YYYY-MM-DD"
            });
  
      $("a").click(function(){
          var now = new Date();
          var expiry = new Date($("#txtExpiryDate").val());
          var startValidAppDate = new Date($("#txtExpiryDate").val());

          //set valid application dates
          startValidAppDate.setTime(expiry.getTime() - (7 * 4 * 24 * 60 * 60 * 1000));//4 weeks to milliseconds

          if(now < expiry && now > startValidAppDate){
              $(".info.bg-success").show();
              $(".info.bg-error").hide();
          }
        else{
              $(".info.bg-success").hide();
              $(".info.bg-error").show();
          }
        });
  });
form{
  background-color:#eee;
  max-width:500px;
  padding:30px;
  margin:30px;  
  }

.info{
  padding:20px;
  border-radius:3px;
  text-align:center;
  margin-bottom:20px;
  display:none;
  }
.bg-success{
  background-color:#5cb85c !important;
  }
.bg-error{
  background-color:#d9534f !important;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />


<form class="center-block">
   <div class="info bg-success">You're good to re-certify</div>
   <div class="info bg-error">You can't certify right now</div>
   <div class="form-group">
            <label for="txtExpiryDate">Expiry Date</label>
            <div class='input-group date' id='txtExpiryDateParent'>
                <input id="txtExpiryDate" type='text' name="ExpiryDate" class="form-control" 
                       placeholder="Expiry date..."  />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
  <a class="btn btn-default" href="javascript:void(0)">Validate</a>
</form>

Comments