Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javscript help needed for displaying a message based on date subtraction

    I would be greatful if somebody could help me.
    I have a webpage where two dates are entred by user a diferrrence between two dates calculated in days. Message should be displayed if no. of days are between 0 and 28 "ok" else "not ok"

  2. #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,626
    Thanks
    57
    Thanked 562 Times in 556 Posts

    Question Clarification or code.

    What kind of code attempt have you made so far?

    Any two dates given or up to 28 days into the future from the current date?

  3. #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,384
    Thanks
    217
    Thanked 2,697 Times in 2,673 Posts
    Code:
    var diff =  // the calculated  difference between two dates in days, assumed positive
    
    if(diff<= 28) {
    document.getElementById("message").innerHTML = "OK");    // you will need a <span> with the id "message" to contain the displayed message.
    }
    else {
    document.getElementById("message").innerHTML = "Not OK");
    }
    The thing about trial and error is that it leads to mistakes. - Commentator Sky Sports
    Last edited by Philip M; 01-07-2017 at 06:39 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  4. #4
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    What kind of code attempt have you made so far?

    Any two dates given or up to 28 days into the future from the current date?
    Code:
    <!DOCTYPE html>
    
    <html>
    
    *<head>
    
    * * <script type="text/javascript">
    
    * * * * function GetDays(){
    
    * * * * * * * * var dropdt = new Date(document.getElementById("drop_date").value);
    
    * * * * * * * * var pickdt = new Date(document.getElementById("pick_date").value);
    
    * * * * * * * * return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
    
    * * * * }
    
    
    * * * * function cal(){
    
    * * * * if(document.getElementById("drop_date")){
    
    * * * * * * document.getElementById("numdays2").value=GetDays();
    
    * * * * } *
    
    
    
        
    
    * * </script>
    
    <style>
    
    
    
    div {
    
    * * border-radius: 30px;
    
    * * background-color: LIGHTBLUE;
    
    * * padding: 10px;
    
    }
    
    input[type=date], select {
    
    * * width: 100%;
    
    * * padding: 12px 20px;
    
    * * margin: 8px 0;
    
    * * display: inline-block;
    
    * * border: 1px solid #ccc;
    
    * * border-radius: 4px;
    
    * * box-sizing: border-box;
    
    }
    
    
    input[type=submit] {
    
    * * width: 100%;
    
    * * background-color: #4CAF50;
    
    * * color: white;
    
    * * padding: 14px 20px;
    
    * * margin: 8px 0;
    
    * * border: none;
    
    * * border-radius: 4px;
    
    * * cursor: pointer;
    
    }
    
    input { font-size: 18px;*
    
        
    
    *     text-align: center;
    
    
    }
    
    input[type=SUBMIT]:hover {
    
    * * background-color: #45a049;
    
    }
    
    
    
    input[type="text"], select {
    
    * * width: 100%;
    
    * * padding: 12px 20px;
    
    * * margin: 8px 0;
    
    * * display: inline-block;
    
    * * border: 1px solid #ccc;
    
    * * border-radius: 4px;
    
    * * box-sizing: border-box;
    
    }
    
    
    }
    
    *ul {list-style: none;padding: 0px;margin: 0px;}
    
    * ul li {display: block;position: relative;float: left;border:1px solid #000}
    
    * li ul {display: none;}
    
    * ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
    
    * * * * * *white-space: nowrap;color: #fff;}
    
    * ul li a:hover {background: #f00;}
    
    * li:hover ul {display: block; }
    
    * li:hover li {float: none;}
    
    * li:hover a {background: #f00;}
    
    * li:hover li a:hover {background: #000;}
    
    * #drop-nav li ul li {border-top: 0px;}
    
    </style>
    
    </head>
    
    
    <body>
    
    <ul id="drop-nav">
    
    * <li><a href="#">Support</a></li>
    
    * <li><a href="#">Web Design</a>
    
    * * <ul>
    
    * * * <li><a href="#">HTML</a></li>
    
    * * * <li><a href="#">CSS</a></li>
    
    * * * <li><a href="#">JavaScript</a></li>
    
    * * </ul>
    
    * </li>
    
    <br>
    
    <CENTER>
    
    
        <h1>BCG ASSESSMENT MODULE</H1>
    
    
    
    * * <div id="reserve_form">
    
    
    * * <div id="pickup_date"><label class="form">DATE OF BIRTH:</label>
    
        <input autofocus required type="date" class="textbox" id="pick_date" name="pickup_date" onchange="cal()"</p></div>
    
    <div id="dropoff_date"><label class="form">DATE BCG GIVEN:</label><input *type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal()"/></div>
    
    
    * * <div id="numdays"><label class="form">CHILD'S AGE IN DAYS:</label><input placeholder="you can not type in this..." type="text" class="textbox" id="numdays2" name="numdays" readonly /></div>
    
    
    
    
    * *
    
    *</div>
    
    
    
    </body>
    Last edited by VIPStephan; 01-08-2017 at 11:19 PM. Reason: added code BB tags

  5. #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,626
    Thanks
    57
    Thanked 562 Times in 556 Posts

    Lightbulb

    You should put your code between [ code] and [ /code] tags (without the spaces) and
    definitely leave out all the '*' characters as they only lead to problems with display and especially the CSS section.

    You should also specify how the dates are to be entered.
    Here I request a mm/dd/yyyy format, but it will also accept different formmats like m/d/yy, mm/d/yyyy, Mon Day, Year, etc.
    Different users may become confused by the lack of direction.

    You did not indicate what to do with negative numbers nor what "BCG Assessment" represents.
    Are you supposed to check that BCG assessment occurred within 28 days of birth?
    I left out the alerts to tell the user when the input is insufficient or excessive. I'll leave that to you.

    Code:
    <!DOCTYPE html>
    <html>
    <meta charset="utf-8" />
    <head>
    
    <style>
     div {
      border-radius: 30px;
      background-color: LIGHTBLUE;
      padding: 10px;
     }
     input[type=date], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
     }
     input[type=submit] {
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
     }
     input { font-size: 18px;
      text-align: center;
     }
     input[type=SUBMIT]:hover {
      background-color: #45a049;
     }
     input[type="text"], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
     }
     ul {list-style: none;padding: 0px;margin: 0px;}
     ul li {display: block;position: relative;float: left;border:1px solid #000}
     li ul {display: none;}
     ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none; white-space: nowrap;color: #fff;}
     ul li a:hover {background: #f00;}
     li:hover ul {display: block; }
     li:hover li {float: none;}
     li:hover a {background: #f00;}
     li:hover li a:hover {background: #000;}
     #drop-nav li ul li {border-top: 0px;}
    </style>
    </head>
    
    <body>
    <ul id="drop-nav">
      <li><a href="#">Support</a></li>
      <li><a href="#">Web Design</a>
        <ul>
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </li>
    </ul>
    <br>
    
    <h1>BCG ASSESSMENT MODULE</H1>
     <div id="reserve_form">
      <div id="pickup_date">
       <label class="lblform">DATE OF BIRTH:</label>
       <input autofocus required type="date" class="textbox" id="pick_date" name="pickup_date"
        placeholder="MM/DD/YYYY" onchange="cal()" />
      </div>
      <div id="dropoff_date">
        <label class="lblform">DATE BCG GIVEN:</label>
        <input *type="date" class="textbox" id="drop_date" name="dropoff_date"
         placeholder="MM/DD/YYYY" onchange="cal()" />
      </div>
      <div id="numdays">
        <label class="lblform">CHILD'S AGE IN DAYS:</label>
        <input placeholder="you can not type in this..." type="text" class="textbox" id="numdays2" name="numdays" readonly />
      </div>
     </div>
    </div>
    
    <script type="text/javascript">
    
    function GetDays(){
      var dropdt = new Date(document.getElementById("drop_date").value);
      var pickdt = new Date(document.getElementById("pick_date").value);
      var days = parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
    //  if (days < 0) { days = 'NaN'; } // should check for NEGATIVE number of days ??? ex: alert('Invalid dates');
    //  if (days > 28) { days = 'NaN'); // check for greater than 28 days in date differences ???
      return days;
    }
    
    function cal(){
      var days = GetDays();
    //  if(document.getElementById("drop_date")){ // only check for existence of element here, not the entry
        if (days != 'NaN') { document.getElementById("numdays2").value=days; }
    //  }
    }
    </script>
    
    </body> 
    </html>
    Your CSS statements confuse me since some inputs are centered and others are left justified.
    Also the <CENTER> tag is deprecated, and you had only ONE of the tags (no closing), so I removed it.

    Also note that your menu display in the upper left disrupts the start of your data entry section.
    I did not try to debug that section as it was not part of your original question.

    Good Luck!

  6. #6
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you sir. I will keep all suggestion in mind for future.

    Thank you again.

  7. #7
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you again.
    Is there a way that after getting days retruned I could display a message on the same page
    If days are =>0 and less than 29 "Age is ok"
    Else if days > 28 "over age"
    Thank you

  8. #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,384
    Thanks
    217
    Thanked 2,697 Times in 2,673 Posts
    I have shown you how to do this is Post #3.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  9. #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,626
    Thanks
    57
    Thanked 562 Times in 556 Posts
    And in the commented code of post #5.

  10. #10
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    I have shown you how to do this is Post #3.
    I am thankful to you for your answer. As I am totally new to both Html and javascript I don't understand where to put this code, how to use span code. I would appreciate if you could help in full code.
    Pls do not be angry if you dont have time, it wont be a problem.
    Thank you.

  11. #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,384
    Thanks
    217
    Thanked 2,697 Times in 2,673 Posts
    Quote Originally Posted by asad.mu@gmail.c View Post
    I am thankful to you for your answer. As I am totally new to both Html and javascript I don't understand where to put this code, how to use span code. I would appreciate if you could help in full code.
    Pls do not be angry if you dont have time, it wont be a problem.
    Thank you.
    We are not at all angry, but if you have so little knowledge of HTML and Javascript that you do not understand the advice you have been given it is really hard to help you. Try improving your knowledge of these subjects before you try to adapt your existing code.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  12. #12
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    We are not at all angry, but if you have so little knowledge of HTML and Javascript that you do not understand the advice you have been given it is really hard to help you. Try improving your knowledge of these subjects before you try to adapt your existing code.
    Thank you.
    I will act on your advice.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •