How to set php data to javascript date and change color of the input text

Question

I'm trying to change the color of the input text whenever the$visa_expired is the same date as today. But right now, I get an error saying Invalid Date

Here is my code:

  <script type="text/javascript">


function checkFilled() {

  var today = new Date();
  var expired = new Date("<?php echo $visa_expiry; ?> ");
  var inputVal = document.getElementById("expiry");

    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "red";
        window.alert(today);
    }
    else{
        inputVal.style.backgroundColor = "yellow";
    }
}

checkFilled();

  </script>

Here is my HTML:

<input type="text" class="form-control" size="5" value="$visa_expiry" id="expiry">

And what exactly is `$visa_expiry`? Also, why not take the date value from the input field? — gre_gor, Oct 12 '16 at 16:59
what is the format you are getting the expired date it should be `dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])` — Mehrad, Oct 12 '16 at 16:59
how can I set the format to that? sorry im new in javascript — marilee arconada, Oct 12 '16 at 17:03

score 2 · Answer 1 · edited May 23 '17 at 11:45

This is similar to what I have done in the past

var inputElement = document.getElementById("expiry");
var inputDate = inputElement.value;
var expired = new Date();
var today = new Date();

expired.setUTCFullYear(inputDate.split("/")[2], inputDate.split("/")[0] - 1, inputDate.split("/")[1]);


if(today === expired) {
    inputElement.style.backgroundColor = "red";
    window.alert(today);
} else {
    inputElement.style.backgroundColor = "yellow";
}

Also it looks like you need to change

<input type="text" class="form-control" size="5" value="$visa_expiry" id="expiry">

To

<input type="text" class="form-control" size="5" value="<?php echo $visa_expiry; ?>" id="expiry">

Just note that since you are using a input form box, its always possible that someone would enter something like 10-12-2016 instead of the 10/12/2016 format you may be expecting. Which would cause the above code to fail. You might want to consider finding a datepicker, or at the least change the <input type="text"> to <input type="date">

Then create some code to format the date to what you want.

References

aasiph · Answer 2 · 2016-10-12T17:50:59.830

0

If 10/13/2016 is the value of $visa_expiry it should not give error. check this link and run the fiddle it alert date. http://phpfiddle.org/main/code/hpia-ub40

<script type="text/javascript">


function checkFilled() {

  var today = new Date();
  var expired = new Date("<?php echo $visa_expiry; ?> ");
  var inputVal = document.getElementById("expiry");

    if (today >= expired) {
        inputVal.style.backgroundColor = "red";
    }
    else{
        inputVal.style.backgroundColor = "yellow";
    }
}

checkFilled();

  </script>

edited Oct 12 '16 at 17:50

answered Oct 12 '16 at 17:27

aasiph

237
2
7

how can I now use my `$visa_expiry`? – marilee arconada Oct 12 '16 at 17:40
by the way your html should be – aasiph Oct 12 '16 at 17:52

J. Mathew · Answer 3 · 2016-10-12T17:06:24.273

-1

You are trying to display an Date Object in alert, which expects a string input. You should use getDate() instead.

try this:

var today = new Date();
var day = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();

today = day + '/' + month + '/' + year

edited Oct 12 '16 at 17:06

answered Oct 12 '16 at 16:59

J. Mathew

29
4

down vote no comment , is this how stackoverflow works? – J. Mathew Oct 12 '16 at 17:02
the output is number "13" – marilee arconada Oct 12 '16 at 17:02
may I ask, whats your input (`$visa_expiry`) exactly? – J. Mathew Oct 12 '16 at 17:02
10/13/2016. that is the value of `$visa_expiry` – marilee arconada Oct 12 '16 at 17:04
This doesn't solve the problem. `alert(today)` works without a problem. And `getDate()` returns the day of the month. – gre_gor Oct 12 '16 at 17:05
what should i do now? @gre_gor – marilee arconada Oct 12 '16 at 17:07
how can I echo out now my `$visa_expiry` to compare to todays date? – marilee arconada Oct 12 '16 at 17:08

How to set php data to javascript date and change color of the input text

3 Answers3