We Keep Coding

How can I get the next 6 days in a v-for loop in Vue3?

I have a specific date that I am wanting to then get the next 6 days (to have a week ahead type of component) for. I am thinking I can just have my initial date and then do a v-for range loop like:
<span v-for="n in 7">{{ n }}</span>
where the first element would be the passed-in date. But I am not exactly sure what the best way to achieve this would be?

It's possible to calculate the next 7 dates directly within the <template>:
<span v-for="n in 7">{{ new Date().setDate(new Date().getDate() + n) }}</span>
demo 1
Alternatively, you could move that into <script> to declutter the <template>:
<script setup>
const today = new Date()
const nextSevenDays = Array(7).fill().map((_, i) => new Date(today).setDate(today.getDate() + i))
</script>
Then update the v-for to render it:
<template>
<span v-for="date in nextSevenDays">{{ date }}</span>
</template>
demo 2

angularjs format date not working

I am trying to 2015-04-17 12:44:38.0 to dd/MM/yyyy format in angularjs
<td ng-bind="item.MON_FE_DUEDATE | date:'dd-MM-yyyy'"></td>
But still showing 2015-04-17 12:44:38.0 only.Please suggested to me where is my mistake?

Because you are trying to format it on a string.
Please see working fiddle.
https://jsfiddle.net/p7gz0opm/
Converted string to Date.
function MyCtrl($scope) {
$scope.date = new Date('2015-04-17 12:44:38.0 ');
}
Template:
<div ng-app ng-controller="MyCtrl">
{{date | date:'dd-MM-yyyy'}}<br />
{{date}}
</div>
Edit :
In your case you will have to pass through a function.
Please see another fiddle.
https://jsfiddle.net/qjs1uj37/
$scope.parth=function(str){
return new Date(str);
}

AngularJs input Week - Show current CalendarWeek / Add 10 days to Current Calender Week

I am quite new to Angular and facing some problems atm.
Here is what I want to build:
I want to show the current Date: yyyy-MM-ss (Works)
I want to show the current Calendar Week: yyyy-Www (Doesn't Work)
On button ng-click, I want to add 10 days to todays date. (Works only for 1)
CODE: JSFiddle
HTML
<div ng-controller="MyCtrl">
<div>
DateToday<br>
<input type="date" placeholder="yyyy-MM-dd" value="{{today | date :'yyyy-MM-dd'}}"><br><br>
CalendarWeek:<br>
<input type="week" placeholder="YYYY-W##" value="{{today | date :'yyyy-Www'}}"/><br><br>
<input ng-click="add10Days()" value="Add 10 Days" type="button"/>
</div>
</div>
JS/AngularJS:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.today = new Date();
$scope.add10Days = function () {
var numberOfDaysToAdd = 10;
$scope.today.setDate($scope.today.getDate() + numberOfDaysToAdd);
};
});
I think it has something todo with the week format yyyy-w## or maybe with the browser (Chrome) I am using. Help would be much appreciated :)
Thanks

'ww' date filter only works in Angular 1.3 and on. I see you're on 1.0.1
Seems to work fine in the fiddle. GIF below:

Filtering results in real time with AngularJS and MomentJS

I have an ng-repeat listing results but I'm aiming to only display elements containing today's date.
My current setup can do it, but needs a page reload to redefine the time variable and thus filter the results.
To be honest I'm not sure that such real-time filter (when is 00.00 the list becomes empty automatically) can be accomplished, so I'd be very grateful if you could shed some light into the issue.
Here's my current layout:
<div class="row msf-row"
ng-repeat="record in recordlist | filter: search | filter: record.date = dateJson "
ng-class="{ 'msf-cancelled': record.cancelled}">
<div class="col-md-1">{{record.date}}</div>
<div class="col-md-1"><strong>{{record.car}}</strong></div>
<div class="col-md-2">{{record.driver}}</div>
<div class="col-md-2">{{record.from}}</div>
</div>
And the relevant JS:
$scope.dateJson = moment().format("YYYY MM DD");
$scope.addRecord = function () {
$scope.recordlist.push(
{
date: $scope.dateJson,
car: $scope.carList.code,
driver: $scope.driverList.name,
from: $scope.locationList.place,
destination: $scope.locationList2.place,
pax: $scope.paxList
}
);
jsonToRecordLocalStorage($scope.recordlist);
};
So basically, the filter compares the $scope.dateJson with the object property record.date and filters the results, but of course date.Json is only loaded on page reload, not on real time.
Any inputs?

You can define your own filter function like here http://davidjs.com/2014/02/how-to-call-any-function-as-a-filter-in-angularjs/
this filter function would look something like this
$scope.filterRecordsByDate = function(record) {
var date = moment();
//reset to midnight
date.set('hours', 0).set('minutes', 0).set('seconds', 0);
//you might need to reset to midnight also the property 'record.date'
return record.date == date;
}
Then in your HTML
ng-repeat="record in recordlist | filter: search | filter: filterRecordsByDate "

Date formatting AngularJS to display only the day and month

I am completed newbie to Angular. So I have date value for created_at. which is
2008-04-25 00:00:00
I want to get only the day similarly month in English. I have tried the following to make sample to get Year alone. But the filter not seems to be working. What am I doing wrong?
<h2>Recent Study</h2>
<ul ng-repeat="x in names">
<li>
<div class="date">
<span class="day">{{ x.created_at | date : 'yyyy' }}</span>
<span class="month">Jul</span>
</div>
<p>{{ x.study_description }}</p>
</li>
</ul>

You need to convert the date to seconds, and use a custome filter:
app.filter('toSec', function($filter) {
return function(input) {
var result = new Date(input).getTime();
return result || '';
};
});
and use it in your HTML like this:
{{ '2008-04-25 00:00:00' | toSec | date:'EEEE'}}
result:
Friday
Angular gives you the option to create a Custome Filter
Here's a working example that achieves what you need using a custome filter.

created_at's formatting isn't compatible.
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
Cited from https://docs.angularjs.org/api/ng/filter/date
for example "2008-04-25T00:00:00" would work.

I hope your getting the input as time stamp ,in your code just change the filter to get the only day
<h2>Recent Study</h2>
<ul ng-repeat="x in names">
<li>
<div class="date">
<!-- getting only day -->
<span class="day">{{ x.created_at | date:'dd '}}</span>
<!-- getting month name and day only -->
<span class="month">{{ x.created_at | date:'MMM-dd '}}</span>
</div>
<p>{{ x.study_description }}</p>
</li>
</ul>
here date:'dd ' gives Day in month, padded (01-31) and
date:'MMM-dd ' gives Month in year (Jan-Dec) and above day in month.

I have found the answer. The problem is simple. We should convert the mysql date time to javascript date time then only you can format it in javascript.
so my format is:2008-04-25 00:00:00
app.filter('format', function () {
return function (item) {
var t = item.split(/[- :]/);
var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
var time=d.getTime();
return time;
};
});
I have converted the mysql to javascript and then to millisecond then applied my filter its working.This may be not efficient. Its working in great manner. Hope this helps someone.
so my html:
<li ng-repeat="x in names">
<div class="date">
<span class="day">{{ x.created_at | format | date:'d'}}</span>
<span class="month">{{ x.created_at | format | date:'MMM'}}</span>
</div>
<p>{{ x.study_description | makeUppercase}}</p>
</li>
Its working fine. #Nishanth answer is giving me undefined. I have upvoted it since its seems working fine for some people. The date format support vary on browser tools too.