I have below code in my HTML and using Angular v 1.6.3 along with angular moment picker from https://github.com/indrimuska/angular-moment-picker. I want to display calendar using format DD-MM-YYYY.
<div moment-picker="member.memberSince"
format="DD-MM-YYYY"
max-view="month"
start-view="month"
autoclose="true"
today="true"
ng-model="member.memberSince"
start-date="member.memberSince | date : 'dd-MM-yyyy'">
{{ member.memberSince | date : 'dd-MM-yyyy' || "Select a date" }}
</div>
I have two problems
When I set member.memberSince from JS code on page load, date is
displayed fine e.g. 01-04-2017. But when I select the date from
calendar, it shows the date in undesired format e.g. Sat Apr 01 2017 00:00:00 GMT+0530.
If I don't set member.memberSince, then I
can't see any control on page to select calendar.
How should I solve this problem?
Plunker
There are multiple issues here.
Let's have a look at docs | angular-moment-picker#options first,
moment-picker: Two-way bindable property as formatted datetime string.
ng-model: Two-way bindable property as Moment.js object.
Now, we should not have both set to same property for obvious reasons. If you have provided ng-model with same property, it seem to give precendence to that and sets the property to Moment.js object.
Next, when you have {{memberSince | date : 'dd-MM-yyyy' || "Select a date"}} (where memberSince is set to ng-model), which initially had a string/Date object. But when you select a date, it again becomes Moment.js object which doesn't comply to date:'<my-dateformat>' obviously.
Solution to your problem (if you haven't figured out yet), would be to remove ng-model set to the directive. And you can freely access memberSince from moment-picker="memberSince" since it would be a formatted string in your provided format i.e. DD-MM-YYYY.
And in HTML, you can use {{ memberSince || "Select a date" }} without needing to use Angular's date filter since memberSince is just a string containing your selected date in provided format.
working plunker
The two bindings (ng-modal) of AngularJS are not working on div.
So try something like this:
<div ng-app="myApp" ng-controller="myCtrl">
<div
moment-picker="member.datepicker"
max-view="month"
start-view="month"
format="DD-MM-YYYY"
autoclose="true"
today="true"
>Member Sience
{{ member.datepicker | date:'dd-MM-yyyy' || 'Select a date' }}
</div>
<script>
var app = angular.module('myApp', ['moment-picker']);
app.controller('myCtrl', function($scope) {
$scope.member ={
datepicker:new Date()
}
});
</script>
you can use locale="en" with format="DD-MM-YYYY hh:mm a" , then it will be work
Related
I have a problem with the handling of dates in angular 8.
I have an api rest with symfony4 (apiPlatform) and it returns the dates with this format
"balanceDate": "2010-10-04T00:00:00+00:00"
If I pass it to my template without the applied Date pipe it puts exactly the same text
2010-10-04T00:00:00+00:00
when I use the pipe as follows in angular
{{ balanceDate | date:'dd-MM-yyyy' }}
The date is represented with one day less
I have been doing tests, I manually added the date to the pipe and I was deleting parts of the date
{{ '2010-10-04T00:00:00+00:00' | date:'dd-MM-yyyy' }} - Fail
{{ '2010-10-04' | date:'dd-MM-yyyy' }} - Correct
{{ '2010-10-04T00:00:00' | date:'dd-MM-yyyy' }} - Correct
So I deduced that this part of the date
+00:00
It is the cause of the problem
I honestly have no idea on which side I should work the date output, whether in Angular or in the symfony api rest.
I hope you can guide me to solve this problem
Thank you
If you know that the date is set as a UTC value ("+00:00" or "Z" for the timezone), you can add the timezone specifier to the date pipe:
date:'dd-MM-yyyy':'UTC'
the solution is to passe the string date to the Object Date of javascript to get a valid Object Date Javascript in the component before to use it on the template:
newdate = new Date('2010-10-04T00:00:00+00:00');
demo: Demo Angular
I have a ng-repeat that display the following expression
{{date}} // 2-1-2017
When I use angular-moment
{{date | amDateFormat:'DD'}}
I got 1, which I'm expecting 2. how to make moment know my format is actually dd-mm-yyyy not mm-dd-yyy in the view? I don't want to parse it at my controllers level as it's complicated.
According to the docs, AngularJs has a built-in filter for date which can be used with the following set:
{{ date_expression | date : format : timezone}}
So that you can use it like:
{{ date | date:'dd-MM-yyyy'}}
However if you use moment's date filter, it has to be a moment date (i.e., complete date with timezone defined) object and you can filter it in the same way that angular does.
{{ date | amDateFormat:'dd-MM-yyyy' }}
You can use angular built-in filter for date (as suggested in other answers), if your input is:
a JavaScript Date object
a number that represents milliseconds (this can be also a string)
a string in ISO 8601 format (e.g. yyyy-MM-ddTHH:mm:ss.sssZ, yyyy-MM-dd etc)
Your date is a string with a format that is not ISO 8601, so you have to change the way you parse 2-1-2017 into a date.
You can parse your string in your controller using moment(String, String) as shown in the following example:
angular.module('MyApp',['angularMoment'])
.controller('AppCtrl', function($scope) {
$scope.dates = [
// Wrong way to parse string
moment('2-1-2017').toDate(),
// Parse string specifying format
moment('2-1-2017', 'D-M-YYYY').toDate()
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>
<div ng-app="MyApp" ng-controller="AppCtrl">
<div ng-repeat="date in dates">
<span>angular-moment: {{date | amDateFormat:'DD'}}</span>
<span>angular date filter: {{date | date:"dd"}}</span>
</div>
</div>
If you don't want to modify your controller you can use angular moment amParse filter. As the docs says, this filter:
Parses a custom-formatted date into a moment object that can be used with the am-time-ago directive and the other filters.
So in your case, you can use the code shown in the following example:
angular.module('MyApp',['angularMoment'])
.controller('AppCtrl', function($scope) {
$scope.dates = [
'2-1-2017', // February 2 2017
'15-1-2017' // January 15 2017
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>
<div ng-app="MyApp" ng-controller="AppCtrl">
<div ng-repeat="date in dates">
<span>angular-moment: {{date | amParse:'D-M-YYYY' | amDateFormat:'DD'}}</span>
</div>
</div>
I think your problem could be related in how you build your date object
new Date("2-1-2017") ; // Wed Feb 01 2017
If I do this, 1 refers to the day, which is correct.
The date filter parse the date based on the object it receive, you should look for a correct Date format for your input date.
You should use the angular filter, like:
{{date | date:'dd-MM-yyyy'}}
is any chance to format date in ng-repeat?
I was trying to format it like
<div class="col-date">{{row.Calendar.start | date : "dd.MM.y"}}</div>
But it was not working. How do I format date in ng-repeat?
Use moment and angular-moment, are definitely best modules out there for stuff related to dates.
First of all convert $scope.row.Calendar.start to date/moment object if it is a string and then use angular moment to show desired date format
Here is a how you can do so:
Inside controller:
$scope.row.Calendar.start = moment($scope.row.Calendar.start,'YYYY-MM-DD HH:mm:ss');
<div class="col-date">{{row.Calendar.start | amDateFormat : "dd.MM.y"}}
From AngularJS perspective everything seems to be valid.
Please check following:
Format of the data you provide to your date filter - is it UNIX timestamp or something else that might be processed by filter?
Check if the data that you are trying to parse, is available
Please provide us with more information about what are you trying to convert, and what result do you have
It seems like you are trying to apply angular date filter of a string object.
Try to first convert it to a Date object in controller and then apply date filter on it.
EXAMPLE
$scope.dtObj = new Date($scope.row.Calendar.start);
then in HTML write this
<div class="col-date">{{dtObj | date : "dd.MM.y"}}</div>
for more details check out documentation here https://docs.angularjs.org/api/ng/filter/date
try this it worked for me hope for you to
{{row.Calendar.start | date:'MMM-dd-yyyy'}}
I am displaying date in this format using angular
{{ date }} ,date:\'MM-dd-yyyy HH:MM:ss\
how to display like Jan-dd-yyyy using angular
Is there any dirct way to do using angular js- (Using normal jquery i am able to do)
use Angular filter of date.
{{date | date:'MM-dd-yyyy HH:MM:ss'}}
See the following link.
http://docs.angularjs.org/api/ng.filter:date
Well,
according to the docs, you have a builtin filter in angular, called date:
<p>{{Date.now() | date:'yyyy'}}
would render to:
<p>2013</p>
The yyyyin this case can be any format string documented. In the example you gave, this would be:
{{date | date: 'MMM-dd-yyyy'}} # => "Jan-21-2013" (if date was a date object for this day)
For custom date:
$scope.user.dob = new Date('1980', '12' ,'10'); // controller code
{{user.dob | date : 'MMM-dd-yyyy'}} // Dec-10-1980
For current date:
$scope.user.current= new Date(); // controller code
{{user.current | date : 'MMM-dd-yyyy'}} // Current date in given format
Try this
{{ date }} ,date:\'MMM-dd-yyyy HH:MM:ss\
I'm trying to create an <input type="date"/> in Emberjs and I have two problems:
In my country the date is displayed as DD-MM-YYYY format while the date field requires a MM-DD-YYYY format (and then the browser displays it according to its locale). So the date should be formatted in one way if the browser supports the date input field and in the other way if not
The date is bound to a Date object
I'm using Momentjs for formatting and Ember Data.
I'm trying to extend Ember.TextField like this:
App.DateField = Ember.TextField.extend
value: ( (key, value) ->
if value?
if /Date/.test value.constructor #I assume that if the passed value is a Date object then it is arriving directly from the model
if Modernizr.inputtypes.date
moment(value).format('YYYY-MM-DD')
else
moment(value).format('DD-MM-YYYY')
else # if the passed value is not a Date object then the user is typing into the form
if Modernizr.inputtypes.date
value = new Date('value')
else
value
).property()
type: 'date'
For browsers with date input supports this works.
For the other browsers the date is correctly displayed, but it is saved as a (wrong formatted) string in the model.
How can I maintain the correct formatting while still using Date objects in the backend?
Demo
Update
Thanks to the blog post provided in the accepted answer I was able to update the demo to do what I want (with some weirdnesses, but not relevant at this time)
Demo2
Have look at these two blog posts:
This is a simple date picker:
http://hawkins.io/2013/06/datepicker-in-ember/
This one uses the bootstrap date picker
http://hawkins.io/2013/06/fancy-ember-datepicker-with-twitter-bootstrap/
Hopefully that will help
I don't see any parsing for the string use case. You will need to use something like Date.parse to convert the string entered by the user into a Date object.
if Modernizr.inputtypes.date
value = new Date(value)
else
value = Date.parse(value)