{{main.featured.date | date:'EEEE, MMMM d, yyyy'}}
//Wednesday, March 16, 2016
//But I want: WEDNESDAY, March 16, 2016
Is there any way to do this without writing my own filter?
You could use the built-in uppercase filter. All you need to do is split the date into two, like this: {{(vm.myDate | date : 'EEEE, ' | uppercase) + (vm.myDate | date : 'MMMM d, yyyy')}}
Here's an working example:
(function() {
angular
.module('myApp', [])
.controller('MainCtrl', function() {
var vm = this;
vm.myDate = new Date().getTime();
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl as vm">
Current date: {{ (vm.myDate | date : 'EEEE, ' | uppercase) + (vm.myDate | date : 'MMMM d, yyyy') }}
</div>
</div>
Related
I am working with Angular version 1.6.1.
I have an event object array that is loaded into the dom using ng-repeat.
An event has the following properties:
{
city: ""
hash: ""
timestamp: 1234578910
noCount: 1
unknownCount: 2
yesCount: 2
}
As you can see an event has a timestamp. This timestamp is transformed using a filter:
app.filter('dateFilter', [function () {
return function (v) {
let operationDate = new Date(v);
let day = 'Yesterday: ';
if (new Date(v).setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)) {
day = 'Today: ';
}
let minutes = operationDate.getMinutes();
return day + operationDate.getHours() + ':' + (minutes < 10 ? "0" : "") + minutes;
};
}
]);
Here my ng-repeat:
<div ng-class="getHighlight(operation.timestamp)" style="margin-top: 10px;">
<div class="row">
<h3 class="col-md-6 col-xs-6">
{{operation.city}}
</h3>
<div class="col-md-6 col-xs-6" style="text-align: right;">
<h3>
{{operation.timestamp | dateFilter}}
</h3>
</div>
</div>
.
.
.
.
</div>
I periodically get Data from an API and update the event-participants if they changed(every 5 seconds).
The problem i got is that when a new day begins the filter doesn't update the prefix to: "Yesterday".
Is there a way to re-apply filters OR to force a reload of a specific DOM-Element?
use $timeout instead of the setTimeout fiddle here demonstrating
another is $scope.$apply() which forces to rerender but
timeout is safer
main.html
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="dateRangeStart" data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed' }" data-on-set-time="startDateOnSetTime()" data-before-render="startDateBeforeRender($dates)"></datetimepicker>
</ul>
I am using angular directive https://github.com/dalelotts/angular-bootstrap-datetimepicker , if you select date and time with this module it will display Thu Mar 23 2017 15:46:38 GMT-0400 (Eastern Daylight Time) so here is it possible to get rid of 46:38 GMT-0400 (Eastern Daylight Time) this part i just want hours selection ?
Ctrl.js
$scope.dateRangeStart = new Date();
$scope.dateRangeStart.setDate($scope.dateRangeStart.getDate() - 1);
$scope.dateRangeEnd = new Date();
$scope.endDateBeforeRender = endDateBeforeRender
$scope.endDateOnSetTime = endDateOnSetTime
$scope.startDateBeforeRender = startDateBeforeRender
$scope.startDateOnSetTime = startDateOnSetTime
function startDateOnSetTime () {
$scope.$broadcast('start-date-changed');
}
function endDateOnSetTime () {
$scope.$broadcast('end-date-changed');
}
function startDateBeforeRender ($dates) {
if ($scope.dateRangeEnd) {
var activeDate = moment($scope.dateRangeEnd);
$dates.filter(function (date) {
$scope.searchObj.endDate = activeDate._i;
// console.log(activeDate);
return date.localDateValue() >= activeDate.valueOf()
}).forEach(function (date) {
date.selectable = false;
// console.log(date);
})
}
}
You need to set the minView option in the configuration per the docs. It's the lowest denomination of time the date picker should show. Set that to hours or days, however you want it.
Example from above:
data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed', minView: 'hour' }"
Joshua Wilborn is correct, set the configuration:
data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed', minView: 'hour' }"
Then you can use the angular-date-time-input directive to format the display of a date in an input box or allow users to enter a valid date with the keyboard.
I have a script which creates a lot of divs with the a data-date attribute and has a time format of Tue Aug 16 2016 12:27:21 GMT+0100 (BST)
An example set could be:
<div class="socialBox" data-date="Tue Aug 10 2016 12:30:21 GMT+0100 (BST)" data-type="twitter">
<div class="socialBox" data-date="Tue Aug 14 2016 12:10:21 GMT+0100 (BST)" data-type="facebook">
<div class="socialBox" data-date="Tue Aug 13 2016 15:27:21 GMT+0100 (BST)" data-type="youtube">
<div class="socialBox" data-date="Tue Aug 03 2016 18:27:21 GMT+0100 (BST)" data-type="instagram">
The divs are appended to a blank div from a variety of different functions and then I run the JS to sort the divs and append it to the original blank div again but I can't seem to get it to work.
Here is the script
loadTwitter(twitter);
loadFacebook(facebook);
loadYoutube(youtube);
loadInstagram(instagram);
// DOESN'T WORK YET (THE BELOW)
var board = $("#social-board");
var boards = board.children('.socialBox');
boards.sort(function(a, b) {
var an = $(a).data("date").getTime();
var bn = $(b).data("date").getTime();
if(an > bn) {
return 1;
}
if(an < bn) {
return -1;
}
return 0;
});
boards.detach().appendTo(board);
Could anyone help me out? I'm not sure if its the appending to the div element or the JS sort function itself.
You can do this by:
Detaching them up front and then using .get to get a real array instead of a jQuery object.
Sorting them (which can be a lot simpler)
Appending that array back to #social-board
so:
var boards = board.children('.socialBox').detach().get();
// --------------------------------------^^^^^^^^^^^^^^^
// A bit shorter :-)
boards.sort(function(a, b) {
return new Date($(a).data("date")) - new Date($(b).data("date"));
});
board.append(boards); // <== switched this to append
Live example:
// Wait a sec so we can see the old order...
setTimeout(function() {
// Now sort them
var board = $("#social-board");
var boards = board.children('.socialBox').detach().get();
boards.sort(function(a, b) {
return new Date($(a).data("date")) - new Date($(b).data("date"));
});
board.append(boards);
}, 600);
<div id="social-board">
<div class="socialBox" data-date="2016-08-10T11:30:21.000Z" data-type="twitter">2016-08-10T11:30:21.000Z</div>
<div class="socialBox" data-date="2016-08-03T17:27:21.000Z" data-type="instagram">2016-08-03T17:27:21.000Z</div>
<div class="socialBox" data-date="2016-08-14T11:10:21.000Z" data-type="facebook">2016-08-14T11:10:21.000Z</div>
<div class="socialBox" data-date="2016-08-13T14:27:21.000Z" data-type="youtube">2016-08-13T14:27:21.000Z</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Note: You cannot rely on the JavaScript Date object parsing dates in the string format you've used. Note the ISO format I've used in the snippet instead.
Side note: Unless you're using the features of data, you may want to use attr instead. data is not just an accessor for data-* attributes. It's both more and less than that.
Your idea is right, but your logic is slightly off in your sort function. This is the code I use to sort dates:
var reverse = false; // ascending/descending flag
var board = $("#social-board");
var boards = board.children('.socialBox');
var orderedBoards = boards.slice().sort(function (elem1, elem2) {
var value1 = new Date($(elem1).data("date")).getTime(),
value2 = new Date($(elem2).data("date")).getTime();
if (reverse) {
// descending
return -(value1 > value2) || +(value1 < value2) || (isNaN(value1)) - (isNaN(value2));
}
// ascending
return +(value1 > value2) || -(value1 < value2) || (isNaN(value1)) - (isNaN(value2));
});
board.empty().append(orderedBoards);
I have a solution:
HTML:
<ul class="sort-list">
<li class="sort-item" data-event-date="2018-06-30 22:00">3</li>
<li class="sort-item" data-event-date="2018-06-29 21:00">2</li>
<li class="sort-item" data-event-date="2018-06-27 22:00">1</li>
<li class="sort-item" data-event-date="2018-07-01 22:00">4</li>
<li class="sort-item" data-event-date="2018-07-02 22:00">5</li>
</ul>
<button onclick="chat_order()">
test
</button>
JS:
function chat_order() {
var container = $(".sort-list");
var items = $(".sort-item");
items.each(function() {
// Convert the string in 'data-event-date' attribute to a more
// standardized date format
var BCDate = $(this).attr("data-event-date");
/*console.log(BCDate);
var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2];*/
var standartDate = new Date(BCDate).getTime();
$(this).attr("data-event-date", standartDate);
console.log(standartDate);
});
items.sort(function(a,b){
a = parseFloat($(a).attr("data-event-date"));
b = parseFloat($(b).attr("data-event-date"));
return a>b ? -1 : a<b ? 1 : 0;
}).each(function(){
container.prepend(this);
});
}
JSFIDDLE: http://jsfiddle.net/2fr0vmhu/294/
How do I convert this Epoch time value returned by a JSON end point to a time string like "Tue 19 Jan 11:14:07 SGT 2038"?
var ractive = new Ractive({
el: '#container',
template: '#template',
data: {
lastUpdated: 2147483647
}
});
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<pre>$ date --date='#2147483647'
Tue 19 Jan 11:14:07 SGT 2038
</pre>
<div id='container'></div>
<script id='template' type='text/ractive'>
<h1>Time: {{Date(lastUpdated)}}</h1>
</script>
I don't want to use additional libraries like moment.js. Thanks!
Ractive doesn't have an opinion about how to format dates, but you can very easily add a custom formatter to the data object:
var ractive = new Ractive({
el: '#container',
template: '<h1>Time: {{formatDate(lastUpdated)}}</h1>',
data: {
lastUpdated: 2147483647,
formatDate: function ( date ) {
// formatting code goes here...
}
}
});
Whenever lastUpdated changes, the formatter will be called again.
You can use MomentJS for this:
var ts = 2147483647;
var m = moment(ts);
var s = m.format("LLLL");
var ractive = new Ractive({
el: '#container',
template: '#template',
data: {
lastUpdated: s
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/locale/af.js"></script>
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<pre>$ date --date='#2147483647'
Tue 19 Jan 11:14:07 SGT 2038
</pre>
<div id='container'></div>
<script id='template' type='text/ractive'>
<h1>Time: {{lastUpdated}}</h1>
</script>
i have a view which shows data and i want to add another class on the list items in my view.
<input type="text" class="filter" placeholder="search..." ng-model="search">
<ul>
<li ng-repeat="item in items | filter:search | orderBy:'date'">
{{ date }} {{ item.heading }}<button ng-click="deleteItem(item.ID)"><i class='icon-trash'></i></button>
</li>
</ul>
i have a variables called item.date and i want to compare it to another variables today. Here is the logic:
if (item.date - today <= 0)
apply class1
if else (item.date - today > 0 && item.date - today <= 3)
apply class2
and so on
how can i achieve this with angular?
can i put this logic directly into my view or do i need to define it in my controller?
thanks in advance
Since you have a bit heavy comparisons to make, I would suggest moving it inside a function rather than having it in HTML:
<li ng-class="getClass(item.date)"
ng-repeat="item in items | filter:search | orderBy:'date'">
JS:
$scope.getClass = function(date){
/* comparison logic here*/
/* returs class name as string */
}
I think you can use ng-class like this:
HTML
<li ng-class="{'class1': item.date - today <= 0, 'class2': (item.date - today > 0 && item.date - today <= 3)}"></li>
OR moving it inside a function like this:
HTML
<li ng-class="getClass(item.date)"></li>
JS
$scope.getClass = function(date){
return {'class1': item.date - today <= 0, 'class2': (item.date - today > 0 && item.date - today <= 3)};
}