We Keep Coding

dates minimum and maximum, onchange event listener not working correctly for to date

I am trying to apply the minimum and maximun for two dates inputs, namely:
<input type="date" name="proposal_from" id="proposal_from" />
<input type="date" name="proposal_to" id="proposal_to" />
<script type="text/javascript">
var proposal_from = document.getElementById("proposal_from");
var proposal_to = document.getElementById("proposal_to");
function setFromDate() {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var minY = today.getFullYear();
var maxY = today.getFullYear() + 1;
var minimum = minY + '-' + mm + '-' + dd;
var maximum = maxY + '-' + mm + '-' + dd;
proposal_from.min = minimum;
proposal_from.max = maximum;
}
setFromDate();
proposal_from.addEventListener("change", function(){
var date = proposal_from.value.split("-");
var from_dd = date[2];
var from_mm = date[1];
var from_Y = date[0];
from_dd++;
var min_to_dd;
if(from_dd < 9){
min_to_dd = "0" + from_dd;
} else {
min_to_dd = from_dd;
}
var min_to_mm = from_mm;
var min_to_Y = from_Y;
from_Y++;
var max_to_dd;
if(from_dd < 9){
max_to_dd = "0" + from_dd;
} else {
max_to_dd = from_dd;
}
var max_to_mm = from_mm;
var max_to_Y = from_Y;
var minimum = min_to_Y + '-' + min_to_mm + '-' + min_to_dd;
var maximum = max_to_Y + '-' + max_to_mm + '-' + max_to_dd;
console.log(minimum);
console.log(maximum);
proposal_to.min = minimum;
proposal_to.max = maximum;
});
</script>
the event listener seems working now, the minimum and maximun dates get set as the date printed in the console should be and date values are completely correct. Before it was or example if I choose date 2021-10-04 I get minimum 2021-10-5 and 2022-10-5 instead of 2021-10-05 and 2022-10-05, is there anyway to do this with .padStart()?

You have to use the same logic that you used to pad zeros in setFromDate in your change event aswell.
Why this is needed?
You are performing incremental operation on from_dd using from_dd++ this will convert its type from String to Number. So convert it back to string again and perform you number padding logic.
function setFromDate() {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var minY = today.getFullYear();
var maxY = today.getFullYear() + 1;
var minimum = minY + '-' + mm + '-' + dd;
var maximum = maxY + '-' + mm + '-' + dd;
console.log(minimum)
proposal_from.min = minimum;
proposal_from.max = maximum;
}
setFromDate();
proposal_from.addEventListener("change", function () {
var date = proposal_from.value.split("-");
var from_dd = date[2];
var from_mm = date[1];
var from_Y = date[0];
from_dd++;
var min_to_dd = String(from_dd).padStart(2, '0')
var min_to_mm = from_mm;
var min_to_Y = from_Y;
from_Y++;
var max_to_dd = String(from_dd).padStart(2, '0')
var max_to_mm = from_mm;
var max_to_Y = from_Y;
var minimum = min_to_Y + '-' + min_to_mm + '-' + min_to_dd;
var maximum = max_to_Y + '-' + max_to_mm + '-' + max_to_dd;
proposal_to.min = minimum;
proposal_to.max = maximum;
});
<input type="date" name="proposal_from" id="proposal_from" />
<input type="date" name="proposal_to" id="proposal_to" />

Add days in a date with Jquery

I need add days in dates inside an array, like the image below:
When select show Semanal (weekly), add 7 days on each date, but my code is adding the same day on all subsequent dates:
var number_installments = 10, frequency = 1;
for(let i = 1; i <= number_installments; i++){
// console.log('Frequencia: ' + frequency)
let data = new Date();
let dia = data.getDate(), mes = data.getMonth(), ano = data.getFullYear(), zero = '';
if((mes + i) <= 9){
zero = '0';
}
let due_date = dia + '/' + zero + (mes + i) + '/' + ano;;
//console.log(i)
if(frequency == 1 && i != 1){
dia = data.getDate() + 7;
due_date = dia + '/' + zero + (mes + 1) + '/' + ano;
}
console.log(due_date);
}

This is because you have initialised your "data" object in every iteration which will only give the current date and day. Which after adding 7 results the same.
May be that comes from data externally.
let data = new Date();

Instead of getting date like that you can use,
var today = date.toJSON().slice(0,10)
which would result in the full date. It would make your code simpler to read and change.

I managed to solve with the help of Abhay H Soningra
var number_installments = 10, frequency = 1;
let data = new Date();
let dia = data.getDate(), mes = data.getMonth(), ano = data.getFullYear(), zero = '0', max_days, max_months = 12;
if(dia % 2 == 0){
max_days = 31;
} else{
max_days = 30;
}
for(let i = 1; i <= number_installments; i++){
// console.log('Frequencia: ' + frequency)
if((mes + i) <= 9){
zero = '0';
}
let due_date = dia + '/' + zero + (mes + i) + '/' + ano;;
//console.log(i)
if(frequency == 1 && i != 1){
dia = dia + 7;
if(dia > max_days){
mes = mes + 1;
dia = data.getDate();
}
if((mes + 1) > max_months){
mes = data.getMonth();
ano = ano + 1;
}
due_date = dia + '/' + zero + (mes + 1) + '/' + ano;
}
console.log(due_date);
}

JS AM/PM times always show AM

I am making a simple time calculator in javascript. I have converted the times into 12-hour instead of 24 hour time for simplicity, however the code I have for calculating am/pm always shows am. Any reason why this would be happening?
Here is my code:
function solveTime(x) {
var suffixSolve = (utcHours + x) % 24;
var suffix = "am";
if (utcHours > 12) {
var suffix = "pm";
}
if (utcMinutes == 0) {
utcMinutesLead = "00";
}
if (utcMinutes < 10) {
utcMinutesLead = "0" + utcMinutes;
}
var timeSolve = (((utcHours + x) + 11) % 12 + 1);
var timeTotal = timeSolve + ":" + utcMinutesLead + " " + suffix;
var utcMod = x;
if (utcMod > 0) {
utcMod = "+" + utcMod;
}
document.getElementById(x).innerHTML = "(UTC" + utcMod + ") " + timeTotal;
}
and here is the code behind utcHours
var masterTimeUTC = new Date();
var utcHours = masterTimeUTC.getUTCHours();
var utcMinutes = masterTimeUTC.getUTCMinutes();
var utcSeconds = masterTimeUTC.getUTCSeconds();
var utcMinutesLead = masterTimeUTC.getUTCMinutes();
Example here: http://codepen.io/markgamb/pen/gwGkbo

The issue is you should be checking whether suffixSolve is greater than 12 instead of utcHours, because utcHours does not change due to the value of x. Since you can shift the hours forward and backwards, I created a variable shift to handle that.
function solveTime(x) {
if (x < 0) {
var shift = 24 + x;
} else {
var shift = x;
}
var suffixSolve = (utcHours + shift) % 24;
var suffix = "am";
if (suffixSolve > 12) {
suffix = "pm";
}
if (utcMinutes == 0) {
utcMinutesLead = "00";
}
if (utcMinutes < 10) {
utcMinutesLead = "0" + utcMinutes;
}
var timeSolve = (((utcHours + x) + 11) % 12 + 1);
var timeTotal = timeSolve + ":" + utcMinutesLead + " " + suffix;
var utcMod = x;
if (utcMod > 0) {
utcMod = "+" + utcMod;
}
document.getElementById(x).innerHTML = "(UTC" + utcMod + ") " + timeTotal;
}
var masterTimeUTC = new Date();
var utcHours = masterTimeUTC.getUTCHours();
var utcMinutes = masterTimeUTC.getUTCMinutes();
var utcSeconds = masterTimeUTC.getUTCSeconds();
var utcMinutesLead = masterTimeUTC.getUTCMinutes();
solveTime(4);
solveTime(0);
solveTime(-8);
<div id="4"></div>
<div id="-8"></div>
<div id="0"></div>

How to set Label Text property based on data selection from DropDownlist using Javascript in Asp.net

I am having two Label controls and a dropdownlist on my web form. I am displaying current date in Label1 and I want to display Expiry Date in Label2 based on selection of dropdownlist. What I am trying to do is I want to display expiry date within Label2 on selecting data from dropdownlist i.e. if "Upto 7 Days" then 7Days will be added to current date and the new date will be displayed within Label2.
My aspx page-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
$("#ddlvalid").change(function () {
var selectvalid = $("#ddlvalid option:selected").text();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 7;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
else if (selectvalid == "Upto 15 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 15;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
else if (selectvalid == "Upto 30 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 30;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
});
window.onload = function show() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById('lblenqmdon').innerHTML = output;
};
</script>
<body>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Enquiry Made On:</td>
<td>
<label id="lblenqmdon" runat="server"></label>
</td>
</tr>
<tr>
<td>Enquiry Validity:</td>
<td><asp:DropDownList ID="ddlvalid" runat="server">
<asp:ListItem>Select Validity</asp:ListItem>
<asp:ListItem>Upto 7 Days</asp:ListItem>
<asp:ListItem>Upto 15 Days</asp:ListItem>
<asp:ListItem>Upto 30 Days</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Enquiry Valid Upto:</td>
<td>
<label id="lblenddt" runat="server"></label>
</td>
</tr></table>
</div></body>
</html>
My Javascript code is not working. Please guide me where I am doing wrong?

Try This
<script type="text/javascript">
function findDate() {
var selectvalid = document.getElementById("<%=ddlvalid.ClientID %>").value;
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 7;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
else if (selectvalid == "Upto 15 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 15;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
else if (selectvalid == "Upto 30 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 30;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
}
</script>
<script type="text/javascript">
window.onload = function () {
getDate();
};
function getDate() {
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth() + 1;
var year = dt.getFullYear();
document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
</script>
AND in Form
<asp:DropDownList ID="ddlvalid" runat="server" onchange="javascript:findDate();">
<asp:ListItem>Select Validity</asp:ListItem>
<asp:ListItem>Upto 7 Days</asp:ListItem>
<asp:ListItem>Upto 15 Days</asp:ListItem>
<asp:ListItem>Upto 30 Days</asp:ListItem>
</asp:DropDownList>

I managed to do the same like this-$(function () {
<script type="text/javascript">
$("#ddlvalid").change(function () {
var selectvalid = $("#ddlvalid option:selected").text();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 7);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
else if (selectvalid == "Upto 15 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 15);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
else if (selectvalid == "Upto 30 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 30);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
});
window.onload = function show() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById('lblenqmdon').innerHTML = output;
};
});
</script>

Javascript date format for a date

How do I format a date in Javascript to something e.g. 'yyyy-MM-dd HH:mm:ss z'?
This date.toString('yyyy-MM-dd HH:mm:ss z'); never work out for me :/
Any idea?
======
I solved my own which I rewrote like this:
var parseDate = function(date) {
var m = /^(\d{4})-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d) UTC$/.exec(date);
var tzOffset = new Date(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +m[6]).getTimezoneOffset();
return new Date(+m[1], +m[2] - 1, +m[3], +m[4], +m[5] - tzOffset, +m[6]);
}
var formatDateTime = function(data) {
var utcDate = parseDate(data);
var theMonth = utcDate.getMonth() + 1;
var myMonth = ((theMonth < 10) ? "0" : "") + theMonth.toString();
var theDate = utcDate.getDate();
var myDate = ((theDate < 10) ? "0" : "") + theDate.toString();
var theHour = utcDate.getHours();
var myHour = ((theHour < 10) ? "0" : "") + theHour.toString();
var theMinute = utcDate.getMinutes();
var myMinute = ((theMinute < 10) ? "0" : "") + theMinute.toString();
var theSecond = utcDate.getSeconds();
mySecond = ((theSecond < 10) ? "0" : "") + theSecond.toString();
var theTimezone = new Date().toString();
var myTimezone = theTimezone.indexOf('(') > -1 ?
theTimezone.match(/\([^\)]+\)/)[0].match(/[A-Z]/g).join('') :
theTimezone.match(/[A-Z]{3,4}/)[0];
if (myTimezone == "GMT" && /(GMT\W*\d{4})/.test(theTimezone)) {
myTimezone = RegExp.$1;
}
if (myTimezone == "UTC" && /(UTC\W*\d{4})/.test(theTimezone)) {
myTimezone = RegExp.$1;
}
var dateString = utcDate.getFullYear() + "-" +
myMonth + "-" +
myDate + " " +
myHour + ":" +
myMinute + ":" +
mySecond + " " +
myTimezone;
return dateString;
}
and I get: 2012-11-15 22:08:08 MPST :) PERFECT!

function formatDate(dateObject) //pass date object
{
return (dateObject.getFullYear() + "-" + (dateObject.getMonth() + 1)) + "-" + dateObject.getDate() ;
}

Use this lib to make your life much easier:
var formattedDate = new Date().format('yyyy-MM-dd h:mm:ss');
document.getElementById("time").innerHTML= formattedDate;
DEMO

Basically, we have three methods and you have to combine the strings for yourself:
getDate(): Returns the date
getMonth(): Returns the month
getFullYear(): Returns the year
Example:
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
document.write(curr_date + "-" + curr_month + "-" + curr_year); </script>
for more details look at 10 steps to format date and time and also check this