Date Format with Angular - angularjs

I have a textbox and using data-ng-model="EmpDetails[0].DateOfJoining" So what happens here is the date comes along with the time and I only want the date.
I have seen multiple place where you use {{EmpDetails[0].DateOfJoining | date: 'MM/dd/yyyy'}} but what I want is within the model, its got a 2 way bind.
Any help will be appreciated.

Related

How to specify utc or local on a date string

Given a ui control that when you select 01/01/2017 it returns a Javascript date as "Sun Jan 01 2017 05:00:00 GMT+0000" (note, an actual Javascript Date object) so its not a string...
However, I definitely need the date part (01/01/2017) and "as UTC"
C# has a DateTime.SpecifyKind(datetimevalue, DateTimeKind kind) method
Basically whats the equivalent to this that doesnt convert it:
moment(vm.theDate).specifyKind(utc)
Looking for to get a moment instance that is 01/01/2017, isUtc=true, from that type of Javascript Date UI control. (Its the Angular ui-datepicker control)
You should look in the UI control's docs for a way to retrieve the selected value as a string instead of a date object. A date object will be influenced by the local time zone, which will throw off your results - especially around DST transitions. Many good datepicker controls will offer this as a separate property (ex, theControl.value or theControl.text instead of theControl.date). Without knowing the specific control you are using, I can't offer anything more specific.
Once you have the string, use moment.utc(yourInputString, yourInputFormat)

AngularJS: displaying wrong date

I have the following datetime:
2015-03-04T00:00:39+00:00
I am trying to display the date as follows using AngularJS
{{entry.entryDate | date:'MM/dd'}}
However, when I do this, it displays 03/03 instead of 03/04.
The date displays correctly for any time before 1900. But when a datetime is 1900 or later, it always displays 03/03 instead of 03/04.
Any idea how I can fix this?
According to AngularJS documentation you can find here , you can set timezone as shown below.
{{ date_expression | date : format : timezone}}
I ended up creating a custom filter to format in utcTime. This SO question helped point me in the right direction.
Why is Angular date filter displaying wrong date?

How to add year/months/day to a current date using angularJS

I am new to angularJS and now i would like to how to add the year from current date.
Let's say i can get the user DOB and i want to add the year+1.
I have tried by using,
$scope.userdob = $rootScope.user.dob;
$scope.userdob.add(1,'years');
but it's not working.
Can anyone help me to know about this logic with example ?
TIA..,
You should use .setDate() function to increment the days.
I created an angular example here http://codepen.io/heshamelghandour/pen/WwodMP
It looks like $rootScope.user.dob is an instance of moment from the moment.js library. I think your main problem is angular's change detection cannot detect when you mutate this instance. Because the instance remains the same but the internal underlying date value does change. Thus I'd suggest:
$scope.userdob = $rootScope.user.dob.clone().add(1,'years').valueOf();
That way angular will get a regular JavaScript Date object instead of a moment instance and it's change detection will work correctly.
FYI to accomplish the same with a standard javascript Date instance you can do:
var userdob = new Date();
userdob.setYear(userdob.getFullYear() + 1)
To advance the year by 1.
Use .setDate() function to increment the days and instead of +1 day and add +365 days it will give you date after 1 year.

How do I control the timezone output of the date filter in Angular?

Let's assume I have an object saved to $scope.person as follows:
{name:"John",birthday:1381227352421}
In order to keep clean and universal, the server keeps all date/time stamps as universal from epoch.
When I display the object, I want to be able to do
<span>{{ person.birthday | date }}</span>
The above works just fine in presenting the browser local date/time, but I want it user-controlled, or perhaps I have different objects, each of which needs a different time presented.
How can I control the date filter so it presents for specific timezones?
EDIT: as requested, further explanation. I want to be able to do something like
<span>{{ person.birthday | date:'tz-'mytime }}</span>
Then I can have a pull-down where the user picks "EDT" or "UTC" or "PST" etc. When they do, the date of 1381227352421 is presented in the appropriate timezone.
What I'd do is implement a custom directive. As you said, you'd like to have a selectbox/pulldown where the user selects its favourite timezone. This is DOM manipulation, right ? And DOM manipulation, in AngularJS, should always been done in a directive.
A directive that would look like that :
<timezonechooser data='birth'></timezonechooser>
Here's a simple Fiddle : http://jsfiddle.net/Bm2Mh/
Have you looked at angular-moment ?

EXTJS: Month/Day Selector (ie. no year)

I am currently using a EXTJS EditorGridPanel in my application, and for one of the column inputs I require the user to be able to pick a month and day (no year).
I am currently using a DateField to do this, but I need to be able to disable the "year" aspect of it in the UI. I do not care if the "value" in the end has a year associated with it, I can simply disregard it. I have searched to see if anyone has done such a thing, but my only findings are people that way to show only Month/Year.
My other option is to create my own custom input (with comboboxes for month and day, where the day combo changes based on the month), however, I honestly don't have all that much time to make one myself as I would have to go through the learning curve since I have never created a custom input extension before.
--> So my big question then is, has anyone heard of an existing EXTJS month/day picker?
Any help would be much appropriated stack overflow peoples!
Although I would probably create my own custom component to use as the editor, if you're not comfortable doing that, have you considered breaking the Month and Day fields into separate columns in your grid column model?
Another option would be to add a input mask to the textfield (you'll need to specify one as a customEditor in your cm). I believe this is done via custom vtypes. This input mask would force the user to enter the date in the format that you specify.
Using this approach would :
keep all month/day data in one column
simplifies your UI code by using the out-of-the-box components. (IMO this is key for learning ExtJS)
try this one
picker: {
slotOrder: [ 'month', 'day' ]
}
Your post appears to contain code that is not properly formatted as code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon.
Try something like:
{
xtype: 'datepickerfield',
name: 'OrderDate',
label: 'Order Date',
picker: { yearTo: 2011, yearFrom: 2020 }
}
I hope this will help you.

Resources