We Keep Coding

Increase the date and assign as a max in date field

I'm using javascript to get the value of form input field with getElementById("myTextInputID")
How can I increase the date by 21 days (3 weeks) and assign this new date as a max in the date field with name end_date ?
What I have tried with new Date() and addDays(21) is not working for me.
<form action ="form_page.php" method="post">
<div id="standardPanel">*Task / Person: <input type="text" name="product" required ></div>
<div id="standardPanel">*Description: <input type="text" name="customer" required ></div>
<div id="standardPanel">*Date: <input id="myTextInputID" type="date" name="manufacture_one" required ></div>
<p class="flip" onclick="showEndDate()">Click to add End Date</p>
<div id="panel">
End Date: (holidays only) <input type="date" name="end_date">
</div>
<div><input id="submit" name="action" type="submit" value="submit"/></div>
</form>
<script>
function showEndDate() {
var inputValue = document.getElementById("myTextInputID").value;
if(inputValue != "") {
document.getElementById("panel").style.display = "block";
} else {
alert("Date cannot be blank");
}
var inputValue = new Date(document.getElementById("myTextInputID").value);
inputValue.addDays(21);
document.getElementsByName('end_date')[0].setAttribute("max", inputValue);
}
</script>```

The addDays method doesn't exist. You need to use the setDate() method.
let dateInput = document.getElementById("dateInput");
dateInput.addEventListener("change", () => {
console.log("eventWorking");
var inputValue = dateInput.value;
var inputDate = new Date(inputValue);
console.log(inputDate);
// Adding 21 days using setDate
inputDate.setDate(inputDate.getDate() + 21);
console.log(inputDate);
})
Date: <input id="dateInput" type="date" name="manufacture_one" required >
In summary you can just replace the line inputValue.addDays(21); with inputValue.setDate(inputValue.getDate() + 21);
But avoid using the same var name two times in the same method ! As it will be bring you problems and it is easy to find two differents name

You use the setDate method to add the desired amount of days to an existing date object and, for simplicity in outputting to the end_date field rather than simply use value you can use valueAsDate as below.
Incidentally ID attributes MUST be unique and in most cases are not really required as identification of DOM elements can be done in other ways such as querySelector. Also perhaps worth noting is that the use of inline event handlers is not considered best practise nowadays - externally registered event handlers are much cleaner '-)
document.querySelector('p.flip').addEventListener('click',function(e){
let manufacture_date=this.parentNode.querySelector('[name="manufacture_one"]');
let end_date=this.parentNode.querySelector('[name="end_date"]');
if( manufacture_date.value=='' ){
alert('Date cannot be blank');
return false;
}
let mdate=new Date( manufacture_date.value );
let ndate=new Date( mdate.setDate( mdate.getDate() + 21 ) );
end_date.valueAsDate=ndate;
});
<form action="form_page.php" method="post">
<div>*Task / Person: <input type="text" name="product" required /></div>
<div>*Description: <input type="text" name="customer" required /></div>
<div>*Date: <input type="date" name="manufacture_one" required /></div>
<p class="flip">Click to add End Date</p>
<div id="panel">End Date: (holidays only) <input type="date" name="end_date"></div>
<input type="submit" />
</form>
Or, an alternative that uses a change event listener bound to the manufacture_one date input field so that the user does not need to click the "click here to..." link to calculate the new date.
document.querySelector('[name="manufacture_one"]').addEventListener('change',function(e){
if( this.value=='' ){
alert('Date cannot be blank');
return false;
}
let mdate=new Date( this.value );
document.forms.dates.end_date.valueAsDate=new Date( mdate.setDate( mdate.getDate() + 21 ) );
});
<form name='dates' action="form_page.php" method="post">
<div>*Task / Person: <input type="text" name="product" required /></div>
<div>*Description: <input type="text" name="customer" required /></div>
<div>*Date: <input type="date" name="manufacture_one" required /></div>
<div id="panel">End Date: (holidays only) <input type="date" name="end_date"></div>
<input type="submit" />
</form>

Display text / Number in the Input based on selected days and weekends

I want to display the amount in the textbox based on the date selected.For weekdays amount is 200 on sundays amount is 500. How can I do it in jquery? Whether it is possible to do?
How can I do it in jquery?
<input type="date" name="mass_date" id="txtDate" required="required" class="col-md-12" />
<input type="text" class="form-control" id="slDay" name="amount" />

Use getDay. Add a event listener to to input change then each time the input changes create a new Date and then use the getDay function that returns the day number (0 for Sunday).
Then you can put a conditional statement to change the form-control selector.
$(function() {
$("#txtDate").change(function() {
var selDate = new Date(this.value);
if (selDate.getDay() == 0) { //If sunday, can change your logic here
$(".form-control").val(5000);
} else {
$(".form-control").val(2000);
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="mass_date" id="txtDate" required="required" class="col-md-12" />
<input type="text" class="form-control" id="slDay" name="amount" />

A simple version
$(function() {
$("#txtDate").change(function() {
var dow = new Date(this.value).getDay();
$(".form-control").val(dow === 1 || dow ===6 ? 2000 : 5000);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="mass_date" id="txtDate" required="required" class="col-md-12" />
<input type="text" class="form-control" id="slDay" name="amount" />

How to check datetime-local input field is not less than other datetime-local field

I am creating a form, where i am using datetime-local for 2 input fields - StartDate and EndDate.
How can I ensure EndDate is not less than StartDate. I wrote below JS, but it is not working on selecting date / or even onclick on submit button of the page.
Please advise, and thanks for taking your time to read through this :)
function checkDate() {
var dateString = document.getElementById('StartDate').value;
var dateString2 = document.getElementById('EndDate').value;
var DateStart = new Date(dateString);
var DateEnd = new Date(dateString2);
if (DateEnd > DateStart) {
alert("End date cannot be less than Start date.");
return false;
}
return true;
}
<input type="datetime-local" class="form-control name_list" name="StartDate" id="StartDate" required="required" onclick="checkDate()" />
</div>
<div class="col-lg-1 mb-0">
<h6>Deployment End *</h6>
</div>
<div class="col-lg-3 mb-0">
<input type="datetime-local" class="form-control name_list" name="EndDate" id="EndDate" required="required" onclick="checkDate()" />
</div>

Using the click event handler will only activate when you click on the form, firing when you do not have any of the useful information. The alternative would be 'onchange' which will fire when you complete the input.
<input type="datetime-local" class="form-control name_list" name="StartDate" id="StartDate" required="required" onchange="checkDate()" />
<input type="datetime-local" class="form-control name_list" name="EndDate" id="EndDate" required="required" onchange="checkDate()" />
If you want to make sure your end date is in the future compared to your start date you need to swap the comparison operator.
if (DateEnd < DateStart) {
alert("End date cannot be less than Start date.");
return false;
}
return true;

webshims validate 000-00-00 date on submit

I would like to validate an input date with a null value like this
<input type="date" value="0000-00-00" id="date" />
On submit I have a this logical message 'Please enter a date.'
I found something like this http://jsfiddle.net/trixta/zRGd9/embedded/result,html,js,css/.
If you know how to do this, here is a sample http://jsfiddle.net/zRGd9/24/

This is simply not a date and depending of the browser implementation this value is either emptied or considered a badInput or a typeMismatch.
If you want to use this you have the following options:
Strictly empty it yourself:
$('input[type="date"]')
.on('change.empty', function () {
var val = $.prop(this, 'value');
if (!val || val == '0000-00-00') {
$.prop(this, 'value', '');
}
})
.trigger('change.empty')
;
Set a novalidate attribute:
```
<form novalidate="">
<!-- ... -->
</form>
Use a different input if you also want to allow non valid date:
```
<input type="number" min="0" max="31" />
<input type="number" min="0" max="12" />
<input type="number" min="0" max="9999" />

Why is my AngularJS ngModel binding to the time inputs, but not binding to the date inputs?

I'm trying to bind an input of type date to a model. I'm able to bind to time fields, but I'm having trouble with date fields. The HTML:
<div ng-app ng-controller="HistoryCtrl">
<input type="date" nm-model="startDate" />
<input type="time" ng-model="startTime" />
<input type="date" nm-model="endDate" />
<input type="time" ng-model="endTime" />
<button ng-click="updateForm()">Update</button>
</div>
This is my controller (simplified):
function HistoryCtrl($scope) {
$scope.result = {
result: 'success',
start: '2013-11-23 03:00:00',
end: '2013-11-24 16:30:00',
delta: 0.05681799352169
};
$scope.updateForm = function () {
$scope.updateTimespan($scope.result.start, $scope.result.end);
};
$scope.updateTimespan = function (start, end) {
$scope.startDate = start.split(" ")[0];
$scope.startTime = start.split(" ")[1];
$scope.endDate = end.split(" ")[0];
$scope.endTime = end.split(" ")[1];
}
}
Here's a fiddle: http://jsfiddle.net/t3m6r/2/
I'm using Google Chrome 31.0.1650.57 for Mac. When I click the "Update" button, the time fields update but the date fields do not. Why? Am I doing it wrong?

You are using ng-model but type wrongs, "nm-model".
<input type="date" ng-model="startDate" />
<input type="time" ng-model="startTime" />
<input type="date" ng-model="endDate" />
<input type="time" ng-model="endTime" />
See JS Fiddle