so I have this time in one of my objects: 2014-09-20T22:00:08.856Z
I want to display this like Day Month Year, h:mm:ss pm/am in my app.
I've tried following the angular docs and did this:
{{mytime | date : 'MMMM d y, h:mm:ss a' : UTC}}
here's a plnkr. http://plnkr.co/edit/UQV31HY7xebo17j7zAWY?p=info
I'd like to display it in UTC timezone but it's displaying pacific time... grrr
You would pass 'UTC' (in quotes). However, you're referencing Angular 1.2, and the time zone parameter isn't available. It was added for Angular 1.3.
You could try the latest release candidate of Angular 1.3, or you might instead consider using moment.js with the angular-moment filter.
Related
Angularjs-Material v. 1.2.4
Both issue can be reproduced using this demo sample: https://jsfiddle.net/Drasius/z51vgqr6/27/
Angularjs-Material md-datepicker when using ng-model-options="{timezone: 'UTC'}" option input box shows date in local time and Date Picker calendar in UTC time.
There is jsfiddle script with the issue https://jsfiddle.net/Drasius/z51vgqr6/11/
<div id="app">
<div>
<strong>Date in local timezone:</strong>
{{date|date:"yyyy-MM-dd HH:mm Z"}}
</div>
<div>
<strong>Date in UTC timezone:</strong>
{{date|date:"yyyy-MM-dd HH:mm Z":"UTC"}}
</div>
</br>
<md-datepicker required ng-model="date" ng-model-options="{timezone: 'UTC'}" ></md-datepicker>
</div>
JavaScript
date = new Date().setUTCHours(23,0,0,0);
angular
.module('app', ['ngMaterial']);
angular
.bootstrap(document.querySelector('#app'), ['app']);
Found in documentation: https://docs.angularjs.org/api/ng/directive/ngModelOptions#specifying-timezones
Input-type specific options:
timezone: Defines the timezone to be used to read/write the Date
instance in the model for , , ... . It understands UTC/GMT and the continental US time zone
abbreviations, but for general use, use a time zone offset, for
example, '+0430' (4 hours, 30 minutes east of the Greenwich meridian)
If not specified, the timezone of the browser will be used. Note that
changing the timezone will have no effect on the current date, and is
only applied after the next input / model change.
Updated: Upgrading to angular-material 1.2.4 package version it solves initial date selection and now shown date matches, but there still is issue if you change date manually in the input field: jsFiddle sample: https://jsfiddle.net/Drasius/z51vgqr6/27/
Raised issue: https://github.com/angular/material/issues/12149
Issues:
When initial date loaded local date is displayed in calendar and input shows correctly UTC date.
When selecting same date few times - input box and calendar date is out of sync (in calendar local date is displayed - should be UTC)
Both issues is reproducible using this codepen demo: https://codepen.io/Drasius/pen/dyZdvoM
There was issues with angular-material.
Created isssue in angular-material github: https://github.com/angular/material/issues/12149.
some changes was required to my application.
Sadly the lib is end of life and no plans to release new version so forged repo and fixed the issue, you can find fix in this repository https://github.com/vdrasutis/material. So in app instead provided angular package from bower - included my own local copy of angular-material script with my fix.
Hire is sample of gulp task to replace gulp angular-material files with custom local copy (CoffeScript):
jsfiles = plugins.bowerFiles filter: ["**/*.js", "!**/angular-mocks/*.js","!**/angular-material/*.js","!**/angular-material-mocks/*.js"]
# Filtering out angular-material form npm and adding local version of angular-material
jsfiles.push('./src/custom_frameworks/angular-material.js')
jsfiles.push('./src/custom_frameworks/angular-material-mocks.js')
gulp.src jsfiles
.pipe plugins.plumber(errorHandler: plugins.notify.onError("Error: <%= error %>"))
.pipe plugins.if config.releaseMode, plugins.concat "#{config.pkg.name}-frameworks.js"
.pipe plugins.if config.releaseMode, plugins.uglify( { output: { max_line_len: 0 } } )
.pipe plugins.if config.releaseMode, plugins.rev()
.pipe gulp.dest config.dist.assets.frameworksPath
enter code here
I want to set min-date option on datetimepicker and also want to set this option according to the timezone of selected location.
for example :
$scope.minDate = moment().subtract(0, 'month');
but this statement set minDate according to local time instead of selected location timezone. Please, anyone, tell me the solution that how can i set minDate according to the timezone and how to solve this problem because I need the solution
I am using angularjs and its indrimuska plugin to show datetimepicker.
Here is the link of the documentation.
You can use moment timezone for getting a date for your desired timezone. Like in the following example
$scope.minDate = getDateFromTimezone('America/New_York');
function getDateFromTimezone (employeetimeZone) {
return moment().tz( employeetimeZone).format("MM/DD/YYYY");
}
I have start date and end date picker in format of mm-dd-yyyy.End date should be with in 10 days range of start date and end date should not be before start date. How to validate using angular js.Any help is greatly appreciated
I advise you to use moment.js. Here's a basic tutorial and help to get started:
https://dzone.com/articles/getting-started-with-momentjs-intro-with-examples
Basically you would do:
function testDate(startDate, endDate){
var start = moment(startDate, 'mm-dd-yyyy');
var end = moment(endDate, 'mm-dd-yyyy');
if(endDate.isBefore(start)){
//start before end
}
if(startDate.add('days', 11).isAfter(endDate)){
//end not within 10 days range
}
//success!
}
It would be something like that. Hope it helps!
For simple pattern matching, you can use the ngPattern directive. For more complex validation (such as ensuring it's a valid date and within a certain range of another date), you will need to write your own validation directive or use the handy custom validation directive available from Angular-UI.
https://htmlpreview.github.io/?https://github.com/angular-ui/ui-validate/master/demo/index.html
Can you provide more details about this as in what library are you using for datepicker. It would help us answer.
Since you are using a datepicker you can restrict the date range in the fromDate field do not display any dates which are after a certain period (10 days from start date in you case).
jQuery datepicker allows this so does other datepickers.
EDIT:
In your controller do something like this.
var newDate = new Date($scope.startdate.getFullYear(), $scope.startdate.getMonth(), $scope.startdate.getDate()+10);
$scope.dateOptions = {
maxDate: newDate,
dateFormat: 'dd/mm/YYYY'
};
And now you can pass dateOptions to your input.
Note: Post a minimal plunkr for faster resolution of your issues.
I send a date to my angularjs app in format 22/03/2017 (dd/mm/yyyy) but angularjs interprets it like mm/dd/yyyy. If I print my day, angularjs return my month.
Any idea of how can I will tell Angularjs that my date is in format dd/mm/yyyy?
I solved it! I just convert my string date like this example:
var date = "03/05/2013";
var newdate = date.split("/").reverse().join("-");
"2013-05-03"
It depends where and how are you using your date instance. If it's in template then use angular date filter. If it's in your controller/service then inject angular $filter in your controller/service. You can pass your desired format as input to date filter. Here's the api docs.
Is there any directive in Angular, I want to enable user when he write 2/3/67 in input for date date needs to be formatted like 02/03/1967 I tried few things on my own but they didn't work.
Just add a Angularjs formating, when displaying users input like so
{{yourdate.variable | date:'yyyy-MM-dd'}}
Se more at AnguarJS date function
EDIT
Here is working Plunker, with different type of dates. Enjoy