The thing I'm trying to do here is when a user selects a StartDate and an EndDate when he clicks on the previous arrow he should fetch data 7 days before every time in order to see the progress.
JavaScript:
$scope.getDiffPrev = function(startDate, endDate, computeDiff) {
var start = startDate;
var date1 = (start.getDate() -7);
var month1 = (start.getMonth() +1);
var year1 = start.getFullYear();
var end = endDate;
var date2 = (end.getDate() -7);
var month2 = (end.getMonth() +1);
var year2 = end.getFullYear();
$http.get('/admin/api/stats?start=' + date1 +'-'+ month1 +'-'+ year1 + '&end=' + date2 +'-'+ month2 +'-'+ year2 +'&computeDiff=true').success(function(data) {
$scope.stats = data;
});
}
HTML:
<label>From</label>
<input type="text" datepicker-popup="dd-MM-yyyy" ng-model="startDate"/>
<label>To</label>
<input type="text" datepicker-popup="dd-MM-yyyy" ng-model="endDate"/>
<button class="btn btn-success" ng-click="getDiffPrev(startDate, endDate, computeDiff)">←</button>
don't we all love javascript's date? ;)
var start = angular.copy(startDate)
start.setDate(start.getDate() + computeDiff);
var date1 = start.getDate();
var month1 = start.getMonth() + 1; // i hate em for this one -.-
var year1 = start.getFullYear();
and here an example
in the line start.setDate(start.getDate() + computeDiff); we use the Date()'s intern calculation to get the right date.
EDIT:
if you can add other libraries have a look at moment.js
moment().subtract('days', 7).format('yourFormatStringHere')
Related
How would you set the value adding day+1 from the current date in JavaScript?
I have this:
<input type="date" id="mycalendar" >
try to set value:
var datedft = document.getElementById('mycalendar').value;
var date = new Date(datedft);
var newdate = new Date(date);
newdate.setDate(newdate.getDate());
var dd = newdate.getDate();
var mm = newdate.getMonth() + 2;
var y = newdate.getFullYear();
var newformat =y+'-'+mm+'-'+dd ;
document.getElementById('mycalendar').value = newformat
In my console Browser I got:
The specified value "2020-10-1" does not conform to the required
format, "yyyy-MM-dd".
The required format is "yyyy-MM-dd", so your date string value should be "2020-10-01".
var newFormat = y.toString().padStart(4, '0') + '-' + mm.toString().padStart(2, '0') + '-' + dd.toString().padStart(2, '0');
If the date format is absolutely critical to the functioning of the webpage, then we will need to make that choice. Below is a code snippet with the date format altered to the YYYY-MM-DD format.
<input type="text" name="input" placeholder="YYYY-MM-DD" required
pattern="(?:19|20)\[0-9\]{2}-(?:(?:0\[1-9\]|1\[0-2\])-(?:0\[1-9\]|1\[0-9\]|2\[0-9\])|(?:(?!02)(?:0\[1-9\]|1\[0-2\])-(?:30))|(?:(?:0\[13578\]|1\[02\])-31))" />
I believe you're asking how to get the correct format when the day(getDate()) is less than 10.
var datedft = document.getElementById('mycalendar').value;
var date = new Date(datedft);
var newdate = new Date(date);
newdate.setDate(newdate.getDate());
var dd = newdate.getDate();
var updatedDD = dd >= 10 ? dd : `0${dd}`; // updated line
var mm = newdate.getMonth() + 2;
var y = newdate.getFullYear();
var newformat =y+'-'+mm+'-'+updatedDD ; // updated line
document.getElementById('mycalendar').value = newformat
I think you want to add one day to the date which user has selected. please check the code snippet.
function onChangeDate() {
var datedft = document.getElementById('mycalendar').value;
var date = new Date(datedft);
date.setDate(date.getDate() + 1)
var newformat = date.toISOString().substr(0, 10)
document.getElementById('mycalendar').value = newformat
}
<input type="date" id="mycalendar" onchange='onChangeDate()'>
The below code will set the next day date in "mycalendar"
const today = new Date(); // today's date
const tomorrow = new Date(today.setDate(today.getDate() + 1)); // tomorrow's date
document.getElementById('mycalendar').value = tomorrow.toISOString().split('T')[0];
<input type="date" id="mycalendar" >
I have an input containing a date value
example:
<input type="text" name="cel_dafa" value="26/12/2018">
I want a button when pressed it increases the value one month
So that the result after the pressure:
<input type="text" name="cel_dafa" value="26/1/2019">
Note: I do not want to harm the day,
Only the month and year if at the end of the year
Ok, so consider you have a button like;
<button onclick="increase()"> Click Me </button>
And input like;
<input type="text" id="date" name="cel_dafa" value="26/12/2018">
Now code of increase function;
function increase()
{
var currentDate = document.getElementById('date').value;
var parts = currentDate.split("/");
var day = parts[0];
var month = parts[1];
var year = parts[2];
var d = new Date(year, month - 1, day);
d.setMonth(d.getMonth() + 1);
var newDate = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();
document.getElementById('date').value = newDate;
}
Html
<input type="text" id="date-input" name="cel_dafa" value="26/12/2018">
<button onclick="increaseDate()">submit</button>
JS
function increaseDate() {
var dateInput = document.querySelector('#date-input').value;
var day = dateInput.split('/')[0];
var month = dateInput.split('/')[1];
var year = dateInput.split('/')[2];
if (month > 11) {
year = parseInt(year) + 1;
month = 1
} else {
month = parseInt(month) + 1;
}
var newDate = day +"/"+ month +"/"+ year;
document.querySelector('#date-input').value = newDate;
}
want a output like below
if Start Date is "01-03-2016" the End date should be "28-02-2017"
if Start Date is "10-04-2016" the End date should be "09-04-2017"
I tried below code
if (dat <= 31 && dat >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(n1, month - 1, dat);
expiryDate.setFullYear(expiryDate.getFullYear() + 1);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month1 = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
var month = getMonthName(month1);
var wholeenddate = day + "-" + month + "-" + year;
but it's not produce desired output.Please Help to solve it.
Add 364 days to your date
For example
var d = new Date("2016-03-01");
d.setDate(d.getDate()+364); //outputs 28-02-2017
and
var d = new Date("2016-04-10");
d.setDate(d.getDate()+364); //outputs 09-04-2017
or Just add 1 year and sub 1 day.
d.setFullYear(d.getFullYear() + 1);
d.setDate(d.getDate()-1);
Now it will match your output just the same even for leap year :)
Demo
var d = new Date("2016-03-01");
d.setFullYear(d.getFullYear() + 1);
d.setDate(d.getDate()-1);
document.body.innerHTML += d.toString();
document.body.innerHTML += "<br>";
d = new Date("2016-04-10");
d.setFullYear(d.getFullYear() + 1);
d.setDate(d.getDate()-1);
document.body.innerHTML += d.toString();
There's a convenient library to help with this sort of thing - moment.js (14k zipped).
var startDate = moment('01-03-2016', 'DD-MM-YYYY');
console.log(startDate.format('DD-MM-YYYY'));
var endDate = startDate.clone();
endDate.add(1, 'years').subtract('1', 'days');
console.log(endDate.format('DD-MM-YYYY'));
3 ways to do this.
// Add hours
var today = new Date();
today.setHours(today.getHours()+24*364);
// Add days
var nextyearDate = new Date();
nextyearDate.setDate(today.getDate()+364);
// More reliable way : Add year & subtract a day.. Hope this works...! Works for 01/01/2016
var nextDate = new Date();
nextDate.setYear(nextDate.getFullYear()+1);
nextDate.setDate(nextDate.getDate()-1);
I want to restrict date picking beyond 7 days from the current date.. help me out
<script>
var date = new Date();
var startdate = date.getFullYear().toString()+"-"+ date.getMonth.toString()+"-"+date.getDate()+1.toString();
var maxdate =date.getFullYear().toString()+"-"+ date.getMonth.toString()+"-"+date.getDate()+6.toString();
document.getElementById("demo").setAttribute("min",startDate);
document.getElementById("demo").setAttribute("max",maxdate);
</script>
There are so many ways of doing this here's one:
var date = new Date();
var startDate = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();
maxDate = startDate.split('-').map(Number);
maxDate[2] += 7;
demo.max = maxDate.join('-');
demo.min = startDate;
I was trying to display Yesterday Date on click of the button , but why its showing Date as "2013-6-0"
instead of 2013-05-31
Could anybody please tell me what i was doing wrong
<!DOCTYPE html>
<html>
<head>
<script>
function displayDate()
{
var d = new Date();
var curr_date = d.getDate()-1;
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();
var yesterday = curr_year + "-" + curr_month + "-" + curr_date ;
document.write(yesterday);
}
</script>
</head>
<body>
<p id="demo">Click Button to Display Yesterday Date</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
You should update and then reference the date from which you've subtracted 1 day:
var d = new Date();
d.setDate(d.getDate() - 1); // <-- add this to make it "yesterday"
var curr_date = d.getDate(); // <-- don't subtract 1 anymore
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();
DEMO
Your code simply takes a day number (like 1, 2, ...) and subtracts one from it. Why would you expect that to automatically roll the day back to the previous month?
You can generate new dates by subtracting milliseconds from a given date. Try this:
var today = new Date();
# subtract milliseconds representing one day from current date
var yesterday = new Date(today - 24*60*60*1000);
var today = new Date();
var yesterday = new Date();
yesterday.setDate(today.getDate()-1);
var yesterdayStr = yesterday.getFullYear() + "-" + (yesterday.getMonth()+1) + "-" + yesterday.getDate();
function displayDate()
{
var today = new Date();
today.setDate(today.getDate()-1);
var yyyy = today.getFullYear().toString();
var mm = (today.getMonth()+1).toString();
mm = mm.length==2?mm:"0"+mm;
var dd = today.getDate().toString();
dd = dd.length==2?dd:"0"+dd;
var yesterday = yyyy+"-"+mm+"-"+dd;
document.write(yesterday);
}