Hi I basically am trying to disable another input field if the day is set to today from another input field (date). I can't seem to force an onchange onto an input field and grab that value into a variable to make this work.
I've had success placing the onchange(this) onto the input field but I have to take it out and force a JS onchange onto it instead.
I've tried the following code. As you can see, it is supposed to do something when the time is past 10am and the date is selected as today:
<script>
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;
var userDateEntry = document.getElementById("fm_deliverydate").onchange().value;
if (hrs >= 10 && userDateEntry == date) {
alert("Shipping for today has ended. Your order will arrive tomorrow");
document.getElementById('fm_deliverytime').disabled= true;
}
else{
document.getElementById('fm_deliverytime').disabled= false;
}
</script>
<input type="date" name="DateName" id="fm_deliverydate" />
<input type="time" name="TimeName" id="fm_deliverytime" />
You aren't attaching the event correctly. You attach an event using addEventListener.
Fiddle: http://jsfiddle.net/AtheistP3ace/125jnvwp/1/
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;
var userDateEntry = document.getElementById("fm_deliverydate");
userDateEntry.addEventListener('change',
function () {
if (hrs >= 10 && userDateEntry.value == date) {
alert("Shipping for today has ended. Your order will arrive tomorrow");
document.getElementById('fm_deliverytime').disabled = true;
} else {
document.getElementById('fm_deliverytime').disabled = false;
}
}
);
If you wanted to add the onclick event listener to the html then you really only need to remove the onchange method you have attached in your dateEntered function and move it to the html, nothing else changes then.
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("fm_deliverydate").value;
if (hrs >= 10 && userDateEntry == date) {
document.getElementById('fm_deliverytime').disabled = true;
} else {
console.log('shipping enabled');
document.getElementById('fm_deliverytime').disabled = false;
};
}
Your html would look like this:
<input onchange="dateEntered()" type="date" name="DateName" id="fm_deliverydate" placeholder="yyyy-mm-dd"/>
<input type="time" name="TimeName" id="fm_deliverytime" placeholder="enter date"/>
Here's the fiddle: https://jsfiddle.net/o73fze9r/
Try adding the event listener to the element instead, and firing your function when it changes. Try it out on jsFiddle. You could also consider adding a case where the date entered is lower than the current date. As of now you can enter a date in the past and still be able to enter a time.
<input type="date" name="DateName" id="fm_deliverydate" />
<input type="time" name="TimeName" id="fm_deliverytime" />
<script>
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(){
document.getElementById("fm_deliverydate").onchange = function() {
dateEntered();
}
})();
function dateEntered(){
var userDateEntry = document.getElementById("fm_deliverydate").value;
if (hrs >= 10 && userDateEntry == date) {
alert("Shipping for today has ended. Your order will arrive tomorrow");
document.getElementById('fm_deliverytime').disabled= true;
}
else{
document.getElementById('fm_deliverytime').disabled= false;
}
}
</script>
Related
I am in need of having a3 checkboxes that should have a tick mark from 2 pm till 11 pm IST in javascript or HTML. This is what I tried
<html>
<body>
<center>
<span style="margin-left:50px; margin-top:0px;">
<p align="left"><font color="white"> <b> India Time: 2pm to 11pm IST </b>
</br>
<input type="checkbox" id="user1" name="user1" value="user1" > User1<br>
<input type="checkbox" id="user2" name="user2" value="user2" > User2<br>
<input type="checkbox" id="user3" name="user3" value="user3" > User3<br>
</p>
<img border="1" src="https://i.postimg.cc/VkPzvHCJ/gh.png" style=" margin-top:-129px;" >
</span>
<h3 style= "font-family: "Gotham A","Gotham B",sans-serif;>
<br> <p align="center" style=" margin-top:-30px;"> <font color="#339933"> <b>RStudio Dashboard
</h3></P>
</body>
<script>
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm}
var today = dd+'/'+mm+'/'+yyyy;
var holidays = [];
holidays = ["01/01/2019" , "26/01/2019" , "20/02/2019" , "01/05/2019" , "27/05/2019" , "04/06/2019", "04/07/2019" , "15/08/2019" , "02/09/2019" , "10/09/2019" , "02/10/2019" , "28/11/2019" , "25/12/2019"];
//var n = str.indexOf("welcome");
if {
var startTime = '2:00 PM';
var endTime = '11:00 PM';
var curr_time = getval();
//var curr_time = '12:39 AM';
//alert(curr_time);
if (get24Hr(curr_time) > get24Hr(startTime) && get24Hr(curr_time) < get24Hr(endTime)) {
//in between these two times
//alert("Yes")
document.getElementById("sid").checked = true;
document.getElementById("anil").checked = true;
document.getElementById("vin").checked = true;
} else {
//document.getElementById("user1").checked = true;
//document.getElementById("user2").checked = true;
}
function get24Hr(time){
var hours = Number(time.match(/^(\d+)/)[1]);
var AMPM = time.match(/\s(.*)$/)[1];
if(AMPM == "PM" && hours<12) hours = hours+12;
if(AMPM == "AM" && hours==12) hours = hours-12;
var minutes = Number(time.match(/:(\d+)/)[1]);
hours = hours*100+minutes;
console.log(time +" - "+hours);
return hours;
}
function getval() {
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10) minutes = "0" + minutes;
var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
var current_time = hours + ":" + minutes + " " + suffix;
return current_time;
}
}
else
{
print ("hello")
}
</script>
</html>
This is what I tried. The code is working, but it seems a bit complicated. Is there any simple method?
The only requirement is to tick the checkboxes from 2 pm to 11 pm IST
Add this js function. And then add "onClick" on every Input. Also the name must be the same.
<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsByName('user');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
<input type="checkbox" onClick="toggle(this)" id="user1" name="user" value="user1" > User1<br>
<input type="checkbox" onClick="toggle(this)" id="user2" name="user" value="user2" > User2<br>
<input type="checkbox" onClick="toggle(this)" id="user3" name="user" value="user3" > User3<br>
I'm trying to make an alert to user when choose a date. For example, when user choose 2018-09-13, then the alert will show message "7 days later will be 2018-09-20". But instead, the alert message shows 2018-09-137.
<input type="date" name = "date" id = "date" onchange="javascript:var chooseDate=(this.value)+7; alert('7 days later will be '+chooseDate);" >
How should I add days into the date ?? please help, thank you.
this.value will return the date as string using the format YYYY-MM-DD, so if you "add" 7, it will be YYYY-MM-DD7. What you could do is create a new Date object, and then add the days you want, like this:
var chooseDate=new Date(this.value);
chooseDate.setDate(chooseDate.getDate()+7);
alert('7 days later will be '+chooseDate);
This will give you the complete date, though, which is something you probably don't want, so you would have to get the values you actually need, like this:
var chooseDate=new Date(this.value);
chooseDate.setDate(chooseDate.getUTCDate()+7);
var futureDate = chooseDate.getFullYear()+'-'+('0'+(chooseDate.getMonth()+1)).slice(-2)+'-'+('0'+(chooseDate.getDate())).slice(-2);
alert('7 days later will be '+chooseDate);
Here you have a working example:
<input type="date" name = "date" id = "date" onchange="var chooseDate=new Date(this.value);chooseDate.setDate(chooseDate.getUTCDate()+7);var futureDate=chooseDate.getFullYear()+'-'+('0'+(chooseDate.getMonth()+1)).slice(-2)+'-'+('0'+(chooseDate.getDate())).slice(-2);alert('7 days later will be '+futureDate);" >
How about this in :
addDays = function(input_date, days) {
var date = new Date(input_date);
date.setDate(date.getDate() + days);
return date;
}
You then call do addDays(this.value, 7) in onchange().
And, please reference on getDate() and setDate().
You are working with string instead of a date object:
function lPad(val) {
return ((10 > val ? '0' : '') + val);
}
function add(input, unit, value) {
var cur = input.value;
var byValue = Number(value);
if (!/^\d{4}\-\d{2}\-\d{2}$/.test(cur) || !/day|month|year/.test(unit) || isNaN(byValue)) {
console.warn('invalid parameters!');
return false;
}
var dt = new Date(cur.replace(/\-/g, '/'));
if (!dt || isNaN(dt)) {
console.warn('invalid date!');
return false;
}
if ('day' === unit) {
dt.setDate(dt.getDate() + byValue);
} else if ('month' === unit) {
dt.setMonth(dt.getMonth() + byValue);
} else {
dt.setFullYear(dt.getFullYear() + byValue);
}
input.value = [dt.getFullYear(), lPad(1 + dt.getMonth()), lPad(dt.getDate())].join('-');
console.log(cur, value, unit, '=', input.value);
return true;
}
<input type="date" onchange="add(this,'day','+7');" title="+7 days" />
<input type="date" onchange="add(this,'month','-1');" title="-1 month" />
<input type="date" onchange="add(this,'year','+2');" title="+2 year" />
try this one ...
<input type="date" name = "date" id = "date" onchange="ggrr(this)" >
<script>
function ggrr(input){
var dateString = input.value;
var myDate = new Date(dateString);
var d = new Date(Date.parse(myDate));
var y = d.getFullYear();
var da = d.getDate() + 7;
var m = d.getMonth();
console.log(y+':'+m+':'+da);
}
</script>
i have a JSP html page with date-time local input field, i am already loading the input field with a value ( coming from backend )
<input type="datetime-local" id="scheduleTaskDateTimeBox" style="margin-left: 25px;" name="scheduleTaskDateTimeBox" value="20-08-2018T11:30:45.0" onChange="DateTimeDisplayer()"></td>
i want to set the min value to the present date and max value to 90 days (which is already done in the js function), from present date and the user can be able to set a new date-time value(unable to do it!!).
function DateTimeDisplayer(){
$("#scheduleTaskDateTimeBox").attr('required', true);
scheduleTaskDateTimeBox.style.display = "block";
var minDateTime = new Date();
minDateTime.setMinutes(minDateTime.getMinutes() + 30);
var dd = minDateTime.getDate();
var mm = minDateTime.getMonth()+1; //January is 0!
var yyyy = minDateTime.getFullYear();
var hh = minDateTime.getHours();
var mi = minDateTime.getMinutes();
var ss = '00.0';
if(dd<10){
dd='0'+dd;
}
if(mm<10){
mm='0'+mm;
}
if(hh<10){
hh='0'+hh;
}
if(mi <10){
mi='0'+mi;
}
minDateTime = yyyy+'-'+mm+'-'+dd+'T'+hh+':'+mi+':'+ss;
scheduleTaskDateTimeBox.min = minDateTime;
maxDateTime = new Date(minDateTime);
maxDateTime.setDate(maxDateTime.getDate() + 90);
var _dd_ = maxDateTime.getDate();
var _mm_ = maxDateTime.getMonth()+1; //January is 0!
var _yyyy_ = maxDateTime.getFullYear();
var _hh_ = maxDateTime.getHours();
var _mi_ = maxDateTime.getMinutes();
var _ss_ = '00.0';
if(_dd_<10){
_dd_='0'+_dd_;
}
if(_mm_<10){
_mm_='0'+_mm_;
}
if(_hh_<10){
_hh_='0'+_hh_;
}
if(_mi_ <10){
_mi_='0'+_mi_;
}
maxDateTime = _yyyy_+'-'+_mm_+'-'+_dd_+'T'+_hh_+':'+_mi_+':'+_ss_;
scheduleTaskDateTimeBox.max = maxDateTime
console.log(maxDateTime);
console.log(scheduleTaskDateTimeBox);
}
somehow this JS function is not working, the value of the new time is not set and returned to the backend.
is there a better way to do it?
How to display the duration?When the dated is entered in textbox,in next field the total number of years(duration).
Example:
if user entered 09/11/2015.it should be displayed as 0.5 as value,by comparing to today's date.
`Now i use the script script
function cal()
{
obj = document.getElementById("Date");
if (obj != null) {
if (obj.value != "") {
var year = obj.value.split("/")[2];
var today = new Date();
if (year > today.getFullYear()) {
alert("Invalid Year");
document.getElementById("Date").value = "";
document.getElementById("year").value = "";
}
else {
document .getElementById("year").value = today.getFullYear() - year;
} }
}
}
`
function aa(){
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(2016,04,12);
var secondDate = new Date(2016,04,25);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
alert(diffDays+" Day(s)");
//document.getElementById('test').innerHTML=diffDays;
}
<button onClick="aa()">
Click
</button>
I want a button to be visible on given date and month with javascript.
Javascript:
<script type="text/javascript">
function today()
{
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
if(month==1 && day==1)
{
document.getElementById('xx').style.visibility='visible';
}
else
{
document.getElementById('xx').style.visibility='hidden';
}
}
</script>
HTML:
<input type="image" SRC="/Patankar/PNH/images/click_anim.gif" id="xx" id="return1" onClick='today();' ALT="Submit Form" style="visibility:hidden;display:none" >
I tried this code but nothing happened. Please tell me my mistake.
You have two id tags on one element:
id="xx" id="return1"
Remove one of them. From your code example, you should remove id="return1".