We Keep Coding

date-time local input type manipulation using HTML and JavaScript

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 set php data to javascript date and change color of the input text

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">

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
How to change css property using javascript
Converting string to date in js

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>

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

How to get value from onchange?

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>

jQuery UI Datepicker separate date/month+year

I want a datepicker like the one on booking.com.
It automatically changes the day+date of the month when a month+year in another select box is changed. I have had a look at the API of jQuery datepicker but I couldn't find anything that would help me.

See i Created One Fiddle Where you Select Date From DatePicker then it will change in Day/Month/year on Another Field . : Demo
$(function() {
$("#fullDate").datepicker({
onClose: function(dateText, inst) {
$('#year').val(dateText.split('/')[2]);
$('#month').val(dateText.split('/')[0]);
$('#day').val(dateText.split('/')[1]);
}
});
});

Thanks for your input. I finally figured how to get it working.
So here is the answer for anyone else who wants this kind of functionality.
HTML
<select name="day" id="day">
<option value="">Select Day</option>
</select>
<select name="month" id="month">
<option value="">Select Month</option>
</select>
JS
function getMonths() {
var months = new Array(12);
months[0] = "Jan";
months[1] = "Feb";
months[2] = "Mar";
months[3] = "Apr";
months[4] = "May";
months[5] = "Jun";
months[6] = "Jul";
months[7] = "Aug";
months[8] = "Sep";
months[9] = "Oct";
months[10] = "Nov";
months[11] = "Dec";
var d = new Date();
var month = d.getMonth();
var year = d.getFullYear();
var monthsArray = new Array(13);
for (var i = 0; i < 13; i++) {
var now = new Date();
if (now.getMonth() == 11) {
var current = new Date(now.getFullYear() + 1, 0, 1);
} else {
var current = new Date(now.getFullYear(), now.getMonth() + i, 1);
}
monthsArray[current.getMonth() + 1 + '_' + current.getFullYear()] = months[current.getMonth()] + ' ' + current.getFullYear();
}
return monthsArray;
}
function getDaysInMonth(month, year, daySelector) {
var names = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var date = new Date(year, month - 1, 1);
var days = [];
while (date.getMonth() == month - 1) {
days[date.getDate()] = (date.getDate() + " " + names[date.getDay()]);
date.setDate(date.getDate() + 1);
}
daySelector.find('option').remove();
daySelector.append($("<option></option>").attr("value", '').text("Day"));
for (var key in days) {
daySelector.append($("<option></option>").attr("value", key).text(days[key]));
}
}
var months = getMonths();
for (var key in months) {
$('#month')
.append($("<option></option>")
.attr("value", key)
.text(months[key]));
}
$('#month').change(function () {
var monthYear = $('#month').val().split('_');
getDaysInMonth(monthYear[0], monthYear[1], $('#day'));
});
Demo & Code

How can a button visible only on given month and date in javascript?

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".