CODEWITHSUNDEEP
javascriptdateinput
Jnsn_
Jnsn_

Reputation: 155

Javascript date entered do something

I have a date input field. I am struggling to get another input field to disable if the date selected is today. I am assuming that it's because the JS is not handling the input after it is entered.

Here it is:

<input  type="date" name="DateName" id="inputID" onkeydown="dateEntered(this)" />

<input  type="time" name="TimeName" id="inputTime" />

<script>
var date = new Date();
var dd = date.getDate();
var mm = date.getMonth()+1;
var yyyy = date.getFullYear();
var hrs = date.getHours();
var userDateEntry = document.getElementById('inputID').value;

if(dd<10) {
    dd='0'+dd
} 

if(mm<10) {
    mm='0'+mm
} 

date = yyyy+'-'+mm+'-'+dd;

function dateEntered(){
    if (hrs >= 10 && userDateEntry == date) {
        alert("Shipping for today has ended. Your order will arrive tomorrow");
        document.getElementById('inputTime').disabled= true;
    }
    else{
        document.getElementById('inputTime').disabled= false;
    }
}
</script>

Upvotes: 0

Views: 74

Answers (3)

AtheistP3ace
AtheistP3ace

Reputation: 9691

You need to get the value once its entered so you need that inside the dateEntered function and instead of keydown I would use onblur (when the field loses focus). Also since you pass this you can use that inside your function.

Fiddle: http://jsfiddle.net/pv5e76dv/3/

HTML:

<input  type="date" name="DateName" id="inputID" onblur="dateEntered(this)"/>
<input  type="time" name="TimeName" id="inputTime" />

JS:

function dateEntered(element){
    var date = new Date();
    var dd = date.getDate();
    var mm = date.getMonth() + 1;
    var yyyy = date.getFullYear();
    var hrs = date.getHours();
    var userDateEntry = element.value;

    if(dd<10) {
        dd='0'+dd
    } 

    if(mm<10) {
        mm='0'+mm
    } 

    date = yyyy+'-'+mm+'-'+dd;
    if (hrs >= 10 && userDateEntry == date) {
        alert("Shipping for today has ended. Your order will arrive tomorrow");
        document.getElementById('inputTime').disabled= true;
    }
    else{
        document.getElementById('inputTime').disabled= false;
    }
}

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Move this inside the function:

var userDateEntry = document.getElementById('inputID').value;

Otherwise, it never gets updated with the current value.

var date = new Date();
var dd = date.getDate();
var mm = date.getMonth()+1;
var yyyy = date.getFullYear();
var hrs = date.getHours();

if(dd<10) {
    dd='0'+dd
} 

if(mm<10) {
    mm='0'+mm
} 

date = yyyy+'-'+mm+'-'+dd;

function dateEntered(){
    var userDateEntry = document.getElementById('inputID').value;
    if (hrs >= 10 && userDateEntry == date) {
        alert("Shipping for today has ended. Your order will arrive tomorrow");
        document.getElementById('inputTime').disabled= true;
    }
    else{
        document.getElementById('inputTime').disabled= false;
    }
}
<input  type="date" name="DateName" id="inputID" onkeydown="dateEntered(this)" />

<input  type="time" name="TimeName" id="inputTime" />

Upvotes: 0

Blue
Blue

Reputation: 22911

You should use the onchange event. This should work for you:

var date = new Date();
var dd = date.getDate();
var mm = date.getMonth()+1;
var yyyy = date.getFullYear();
var hrs = date.getHours();

if(dd<10) {
    dd='0'+dd
} 

if(mm<10) {
    mm='0'+mm
}

date = yyyy+'-'+mm+'-'+dd;

function dateEntered(obj){
    var userDateEntry = obj.value;

    if (hrs >= 10 && userDateEntry == date) {
        alert("Shipping for today has ended. Your order will arrive tomorrow");
        document.getElementById('inputTime').disabled= true;
    }
    else{
        document.getElementById('inputTime').disabled= false;
    }
}
<input  type="date" name="DateName" id="inputID" onchange="dateEntered(this)" />

<input  type="time" name="TimeName" id="inputTime" />

Upvotes: 3

Related Questions