I'm trying to set a default value in my ionic date picker but it just seems to be ignored.
The versions are;
Ionic "1.3.2"
Node v14.15.4
AngularJS v1.8.0
ion-datetime-picker.min.js (not sure of this version)
So far I've tried this;
<div class="row">
<div class="col col-33">
<strong> DOB: </strong>
</div>
<div class="col">
<span ion-datetime-picker date ng-model="data.demographics.pmiDOB">
{{data.demographics.pmiDOB | date: "dd/MM/yyyy"}}
</span>
</div>
</div>
$scope.data.demographics.pmiDOB = "2022-04-21"; //new Date(1974,3,24).toISOString();
I understand that the date picker needs an iso date format but no matter what I try the date picker when rendered just shows today's date?
Thx.
I found the solution with this;
let dateString = $scope.data.demographics.pmiDOB;
let [day, month, year] = dateString.split('/')
const dateObj = new Date(+year, +month - 1, +day)
$scope.data.demographics.pmiDOB = dateObj;
Related
I am getting date from server via json.The json data date format is MM-dd-yyyy.but i need to display it like dd-MM-yyyy.I am used normal angular date filters but its not working.
{{item.date | Date:'dd-MM-yyyy'}}
Why its not working? Is there any better way?
Remove capital letter from Date filter and see your " item.date " is it string or date.
If it is string then not filter that date otherwise its working
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.CurrentDate =new Date('10-30-2016');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="datCtrl">
{{CurrentDate | date:'dd-MM-yyyy'}}
</div>
Try this:
{{item.date |date: 'dd MMMM yyyy'}}
This filter statement should work:
{{ item.date | date: 'dd-MM-yyyy' }}
Reference : How to change date format using date filter
I'm developing a date-picker based on AngularJS.
The HTML is quite simple:
<div class="calendar-slider-actions">
<a class="slider-prev" ng-click="vm.prevWeek()">
<i class="ico ico-arrow-left"></i>
</a>
<div class="slider-clip">
<ul class="slides">
<li class="slide" data-ng-repeat="date in vm.dates">
<div class="radio">
<input type="radio" name="group-days" id="field-{{date.weekDay | lowercase}}" ng-value="vm.selectedDate" ng-checked="vm.selectedDate === date.date">
<label class="btn btn-primary btn-primary-alpha radio-label" for="field-{{date.weekDay | lowercase}}" ng-click="vm.selectDate(date)">
<strong>{{date.weekDay}}</strong> {{date.shortDate}}
</label>
</div>
</li>
</ul>
</div>
<a class="slider-next" ng-click="vm.nextWeek()">
<i class="ico ico-arrow-right"></i>
</a>
</div>
Styled correctly this gives me something like this
The dates are generated on the fly in the controller and only seven at the time are generated. Once I click left or right the next seven dates are calculated, the array is updated and the GUI is refreshed as well with the new dates. So far so good.
The controller looks like this:
function DayPickerCtrl($scope) {
var vm = this;
vm.selectedDate = moment().startOf('day').format();
_changeDisplayedWeek(0);
vm.selectDate = function(date) {
vm.selectedDate = date.date;
};
vm.nextWeek = function() {
_changeDisplayedWeek(7);
};
vm.prevWeek = function() {
_changeDisplayedWeek(-7);
};
function _changeDisplayedWeek(daysToAdd) {
var selectedDate = moment(vm.selectedDate).add(daysToAdd, 'days');
vm.selectedDate = selectedDate.format();
vm.weekOfYear = selectedDate.format('WW');
vm.dates = _expandWeek(selectedDate);
};
function _expandWeek(startDate) {
var dates = [];
var dayOfWeek = moment(startDate).startOf('isoweek');
for (var i = 0; i<7; i++) {
dates.push({ weekDay: dayOfWeek.format('dd'), shortDate: dayOfWeek.format('DD.MM'), date: dayOfWeek.format() });
dayOfWeek.add(1, 'd');
}
return dates;
};
The problem I'm facing is that I'm not able to animate during the dates update. As intended it would be very cool if the dates could slide either left or right. I did try to achieve this with ng-animate but I couldn't figure out how to.
Here's a basic example of the date picker: https://plnkr.co/edit/4Oz0RBvJafiTm6ZAfidt?p=preview
Any ideas on how to get this to work?
Regards and thanks in advance
Lukas
Sometimes using angular-animate can be tricky. Looking at your markup I'm assuming you want to slide each radio button individually (maybe to throw in some staggering effects). The problem with angular-animate it does not maintain the order of the items in the list that are marked as ng-leave. In this case the (to be deleted) items are appended to the end of the <ul><li></li></ul>, which screws the relative position.
Have a look into this plunker. I've quickly eyeballed the styling from the image, so you'll probably want to tweak it a bit.
Cheers.
I am trying to display emails from json file. I want to display in this format:
Today
Message: messagename 7:24AM
from:janan,walker
Message:messageName 4:20AM
from:texas,Vanessa
Yesterday
Message:messageName yesterday 4:55PM
from: Hopkins,Alison
how to display in this format. here is my code:
<div >
<div ng-repeat="email in inboxEmailList()">
<div id="emailDay">{{email.Date}}</div>
<div id="emailRowContent">
<div id="emailType">{{email.type}}: {{email.subject}}</div>
<div id="emailTime">{{email.Time}}</div>
<div id="emailFrom">{{email.from}}</div>
</div>
</div>
</div>
I think the "shortTime" filter is what you are looking for:
<div id="emailDay">{{email.Date | date:'shortTime'}}</div>
And here is a list of all the built in date formatters in angular
I want to order by elements according to date.
<ion-item ng-repeat="item in PortfolioIdeaList | orderBy:'CreatedDate'" style="background-color:rgb(25, 26, 0);" ng-click="ShowIdeaDetails(item.Id)">
<div class="row">
<div class="col col-80">
<p> {{item.Title}}</p>
</div>
<div class="col col-20">
<b> {{item.Status}}</b>
</div>
</div>
<div class="row">
<div class="col col-70">
{{item.CreatedDate}}
</div>
<div class="col col-30">
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
</div>
</ion-item>
I am getting Title,Created Date and Status from webservices in JSON format.
Created Date is coming as String format MM/DD/YYYY HH:MM:SS e.g 6/2/1991 2:33:43 PM or 12/23/2015 11:55:12 AM.
but its not ordering properly.
How to convert string into date and then order it.
With your code, if CreatedDate is a string, your objects will be orderBy alphanumerical order.
If you want to order by date, you can :
Convert this property to Date when you get your objects from the server
new Date(item.CreatedDate)
Create a custom filter who convert values into Date and order it :
.filter("customOrderBy", function () {
return function (input) {
input.sort(function(a,b){
return new Date(a.CreatedDate) > new Date(b.CreatedDate);
});
return input;
}
});
And call it in your template :
ng-repeat="item in PortfolioIdeaList | customOrderBy"
But in all case, you need to convert your strings to YYYY-MM-DD format
Add :false after orderBy works for me
<ion-item ng-repeat="item in PortfolioIdeaList | orderBy:'CreatedDate':false" style="background-color:rgb(25, 26, 0);" ng-click="ShowIdeaDetails(item.Id)">
I am using Angular in a web application. I am showing some placed orders by users with following code. And this works just fine:
<div class="orderspresent" ng-cloak="">
<div class="roworders" style="margin-bottom:5px;" ng-controller="allorders" >
<div class="col-md-3" ng-repeat= "o in orders | orderBy:-o.orderID" ng-hide= "o.orderStatus=='done'" ng-hide="hidden" ng-class="{fade: startFade}">
<div class="sm-st clearfix">
<div class="sm-st-info">
<i class="fa fa-square"></i>
<input type="checkbox" ng-true-value="{{o.orderID}}" ng-change="stateChanged({{o.orderID}})" ng-model="status"/>
</div>
<span>{{o.customerName}}</span>
<p>{{o.orderDate | date:'h:mm'}}</p>
<ul>
<li ng-repeat= "details in o.details">
{{details.aantal}} x {{details.productTitle}}
<div ng-if="details.extras">
+{{details.extras}}
</div>
</li>
<p class="totalprice">{{getTotal()}} euro</p>
</div>
</div>
But for each of these orders I want to show the time they got ordered. I tried using {{o.orderDate | date:'h:mm'}} but this doesn't seem to do anything... How can I only show for example: 10:06 or 12:10?
JSON Data
[{"orderID":49,"customerID":61,"orderDate":"2015-05-06 10:03:05","orderDeliveryDate":"2015-05-06 10:30:05"}, ...]
Looks like the string you are passing into date filter is not valid ISO 8601 datetime string so the filter can't handle it. The closest to your orderDate strings applicable format would be something like yyyy-MM-ddTHH:mmZ. So you can either make your strings to look like '2015-05-06T10:03:05' or convert them to Date objects before passing to template: new Date('2015-05-06 10:03:05').
Here is a little demo of the difference: http://plnkr.co/edit/t2nk1qS4SMvGPzeSi3eC?p=preview