I am using angularjs to show a history of stocks bought and sold date wise.
My data is consists of a unixtimestamp field. I want to club the date together to show a header BAND of the date and show entries of that date below the header.
I currently used the ng-repeat="x in transactions" however i am not able to add a custom if condition to check if the date is a new data and inject a header between the rows printed.
Here is how i want the output to be
Monday, 12th January 2015
MSFT,BUY,10,1000
YHOO,SELL,50,200
Tuesday, 13th January 2015
MSFT,SELL,40,500
Code currently is
<div ng-repeat="x in transactions" >
{{ x.transaction_date *1000| date:'MMM-dd-yyyy'}}, {{x.transaction_type}}, {{x.stock_code | limitTo: 10}}, {{x.units}}, Rs. {{x.balance}}
</div>
you can refer with your ng-if to a function with the actual item and the last Date. the function will check if the item has the same date than the last item and save the actual date into an scope variable to check the next one against this.
ng-repeat="item in transactions"
....
<div class="header" ng-if="ctrl.checkForNewDate(item)">
<!-- Header Content -->
</div>
in the controller
var vm = this;
vm.lastDate = new Date("2000/01/01");
vm.checkForNewDate = checkForNewDate;
function checkForNewDate(item) {
var dateItem = new Date(item.timestamp);
if (dateItem == vm.lastDate) {
return false;
} else {
vm.lastDate = dateItem;
return true;
}
code as prototype not checked sorry for that ;-)
Related
I am trying to display the "created_at" field from my database using laravel as my backend app and vuejs as my frontend app.
This is what is presently being displayed:
Time: { "created_at": "2018-02-22 14:14:30" }
This is what I want to be displayed:
Time: 22-Feb-2018 14:14:30
My laravel backend code:
$date = loan_request::all('created_at')->toArray();
return([$date]);
Any help rendered would be appreciated..
How I would do the date formating is to use an Eloquent Accessor.
To do this, go to your loan_request model, and simply add the following function.
public function getCreatedAtAttribute($date)
{
return Carbon::parse($date)->format('d-M-Y H:i:s');
}
Be sure to add use Carbon\Carbon; at the top before your class.
Now when you return your date with...
$date = loan_request::all('created_at')->toArray();
return([$date]);
Your dates in the json array will always be in the format 22-Feb-2018 14:14:30
You can read more about Accessors and Mutators in the Laravel Docs here
Edit
I missed when reading the first time you want to remove the created_at key. As others have pointed out you could do that in your vue code by doing one of the following.
<div v-text="date.created_at"></div>
or..
<div>{{data.created_at}}</div>
If you still really want laravel to only return the date without the created_at key then change your query in Laravel to the following.
$date = Location::all('created_at')->pluck('created_at');
return ([$date]);
To answer your question (with your existing HTML):
$date = loan_request::all('created_at')->pluck('created_at')->toArray();
return $date; // will return an array of dates
But what you can do if return the same thing as before but display something like that (and not using my laravel change):
date = { "created_at": "2018-02-22 14:14:30" }
in your html / vue.js file
<span>{{ date.created_at }}</span> <!-- "2018-02-22 14:14:30" -->
Because for now you seem to display something like this:
<span>{{ date }}</span> <!-- { "created_at": "2018-02-22 14:14:30" } -->
And if you want to format the date, you can only do that in the frontend by using filters in vue.js! (You can code your own or use https://github.com/brockpetrie/vue-moment)
<span>{{ date.created_at | moment("dddd, MMMM Do YYYY, h:mm:ss a") }}</span>
<!-- e.g. "Sunday, February 14th 2010, 3:25:50 pm" -->
I've got two calendars in a form. One is a starting date, and the other is the ending date. I'm using the 'ng-pick-datetime' (https://www.npmjs.com/package/ng-pick-datetime) to have a cross-browser calendar picker.
My goal is to block from date 0 (1st Jan 1970) to the date selected in the starting date calendar, in the ending date calendar picker.
So the thing here is to make sure the ending date is after the starting date.
For this, ng-pick-datetime' picker has the [disabledDates] property, which is waiting for an array of Dates that shouldn't be selectable.
What I'm trying is to bind this property to my array of forbidden dates, which is created in a function when the form is created, and also every time the ending date calendar gets focus.
I'm printing my array of forbidden dates to check if it is created correctly and if the dates included in it are between date 0 and the starting date selected. I looks like this part is working fine.
I don't get any browser console error. Just have the ending date calendar picker not blocking any date.
This is my template code:
<div class="input-control col-sm-6" [class.has-error]="startDate.invalid && startDate.dirty">
<label class="control-label" for="startDate">Starting Date *</label>
<owl-date-time
[(ngModel)]="data.startDate"
[dateFormat]="'DD-MM-YYYY'"
[inputId]="'startDate'"
[placeHolder]="'dd-mm-aaaa'"
[type]="'calendar'"
[dataType]="'date'"
[autoClose]="'true'"
id="startDate"
name="startDate"
#startDate="ngModel"
[disabled]="!paramsService.isSolicitante()"
[hideClearButton]
required>
</owl-date-time >
</div>
<div class="input-control col-sm-6" [class.has-error]="endDate.invalid && endDate.dirty">
<label class="control-label" for="endDate">Ending Date *</label>
<owl-date-time
[(ngModel)]="data.endDate"
[dateFormat]="'DD-MM-YYYY'"
[inputId]="'endDate'"
[placeHolder]="'dd-mm-aaaa'"
[type]="'calendar'"
[dataType]="'date'"
[autoClose]="'true'"
id="endDate"
name="endDate"
#endDate="ngModel"
[disabled]="!paramsService.isSolicitante()"
[hideClearButton]="!paramsService.isSolicitante()"
[disabledDates]="'forbiddenDates'"
(onFocus)="getForbiddenEndDates()"
required>
</owl-date-time >
</div>
//printing of selected date values:
<div class="col-sm-6">{{ data.startDate}}</div>
<div class="col-sm-6">{{ data.endDate}}</div>
{{ this.forbiddenDates }} //printing of the dates array to check it
And this is the component code (typescript), just the part that matters here:
forbiddenDates: Date[] = [];
ngAfterViewInit(): void { this.getForbiddenEndDates(); }
// This creates an array of Dates from the beginning of all times to the value of startDate
getForbiddenEndDates(): void {
let dateZero: Date = new Date(0);
let forbiddenDates: Date[] = [];
while (dateZero <= this.data.startDate){
forbiddenDates.push(new Date(dateZero));
dateZero.setDate(dateZero.getDate() + 1);
}
this.forbiddenDates = forbiddenDates;
}
Screenshot of the form and the forbidden dates array printed
I answer myself. It seems that this [disabledDates] template property doesn't change dynamically, so it's just for a fixed array of dates.
The solution is much simpler. Add this template property to the endDate input field:
[min]="data.startDate"
I was wondering if anyone could help me with filter on dates within ng-repeat
I have a text field that I enter the search text into for filter the results in my table
take this cut down example`
<tr id="credentialsData" ng-repeat="credential in credentials.data | filter:credentialsSearchText">
<td>{{credential.createdDate | date:'medium'}}</td>
</tr>`
credential.createdDate comes back in the rest call in the format 2015-03-24T21:19:49Z
When I attach the medium date filter - it displays as Mar 24, 2015 9:19:49 PM
However when i search on the String Mar or 9:, I get no results. Angularjs searches on the base object and ignores the filter.
I have read other options online where the person recommends adding different date formats into the json object but unfortunately that is not an option for me
Any help on this would be appreciated
Cheers
Damien
You can use a custom function for the filter.
https://docs.angularjs.org/api/ng/filter/filter
<tr id="credentialsData" ng-repeat="credential in credentials.data | filter:credentialsSearchText:compareCredentialDate">
<td>{{credential.createdDate | date:'medium'}}</td>
</tr>
In your controller, put a
$scope.compareCredentialDate = function(credential, expected) {
// you have to inject '$filter' to use this:
var dateFilter = $filter('date');
// this is the value that "credential.createdDate | date:'medium'"
// evaluates to:
var formattedDateString = dateFilter(credential.createdDate, 'medium');
// hypothetical matching method - you can implement whatever you
// want here:
var isMatch = formattedDateString.indexOf(expected) >= 0;
return isMatch;
}
I'm having trouble getting Moment in Angular to format my time like I would like. I have the date filter working here:
<h4>{{event.date | amDateFormat:'MMMM Do'}}</h4>
But when I try to use this format to print out a time, my time disappears completely out of the browser. This is what I am typing:
<div class="row">
{{event.time | amDateFormat: 'h:mm a'}}
</div>
I am using Firebase if that matters. Also, the input to get the time is the HTML5 input type=time attribute.
When you use type=time for an input, the value is stored as a string which only represents a time, such as "1:00" or "13:00". The amDateFormat filter needs a value that can be interpreted as a date which can be a Date object, a number value for a timestamp, or a properly formatted string date. The time values that you will get using type=time are not valid date strings so amDateFormat can't properly parse the value.
The easiest way to make it work is to just concatenate the value of event.date and event.time before you use the amDateFormat filter:
<div class="row">
{{event.date + ' ' + event.time | amDateFormat: 'h:mm a'}}
</div>
A better solution is to use a function where you pass in the date and time, or just the time and construct something that can be interpreted as a date, or is a date object.
<div class="row">
{{ combine(event.date,event.time) | amDateFormat: 'h:mm a'}}
</div>
simple combine function
$scope.combine = function(date,time) {
if (date && time) {
return date + ' ' + time;
} else {
return "";
}
};
I still think it's kinda hacky to have to add a date to the time like that but it works and you may even end up joining them together anyway in your data model. The best solution I believe would be to just have one event.dateAndTime object that you can use to represent both the date and time -- and you can do this using the type=datetime-local html5 type (at least in Chrome it worked for me).
<dir>Date and time: <input type="datetime-local" ng-model="event.datetime"></dir>
<h4>{{event.datetime | amDateFormat:'MMMM Do'}}</h4>
<div class="row">
event.datetime time: {{ event.datetime | amDateFormat: 'h:mm a'}}
</div>
Here's a working plunker: http://plnkr.co/edit/OERKK9ilxFwUlKLKirtl?p=preview
I have a json file with a released field that comes back with such format:
released: "2002-01-28"
I intend to display them sorted by date (earlier first) and only showing the year. I've used the truncate module (in my example, release: 4) and so far its showing only the first 4 characters, but I haven't succeed using orderby to sort it correctly.
Any pointers?
Also, in some items the released field comes back empty, any quick way to display just a "unknown" instead of a blank space?
Thanks!
<li ng-show="versions" ng-repeat="version in versions | filter: '!file' | orderBy: version.released">
{{version.released | release:4}} - {{version.format}} - {{version.label}}
</li>
Here is a date formatting filter I use. It takes a date and converts it into whatever format you wish, in your case, 'yyyy'. Bind the raw date stamp in your template and then 'orderBy' should work fine. This is how I always do it. Oh, you might not want the replace() function... that was specific to my last project.
.filter('DateFormat', function($filter){
return function(text){
if(text !== undefined){
var tempdate = new Date(text.replace(/-/g,"/"));
return $filter('date')(tempdate, "MMM. dd, yyyy");
}
}
})
You can show unknown by doing {{version.released || 'unknown'}}.
If you only want to show the year do this {{ (version.released | date : date : 'YYYY' ) || 'unknown'}}