I want to set default Timezone offset (America/Chicago) in date field. new Date function added into the code and call it properly into HTML file. its showing date and time properly but i want to set time zone default to America/chicago.
code in controller :
<script>
mainApp.controller('depositController', ['$scope', '$http', '$filter', function($scope, $http, $filter) {
$scope.myDate = new Date();
}]);
</script>
html code:
<div class="col-lg-8">
<input id="deposit_date" name="deposit_date"
class="form-control"
type="text"
ng-init="deposit_time=(myDate | date:'HH:mm:ss a' : '-0500')"
ng-model="deposit_time"
readonly="readonly"/>
</div>
I want to show America/Chicago (Central Standard Time) current time.
You can't. It's depends on the browser settings
The AngularJS datetime filter uses the time zone settings of the browser.
The same application will show different time information depending on the time zone settings of the computer that the application is running on.
Neither JavaScript nor AngularJS currently supports displaying the date with a timezone specified by the developer
You can't. AngularJS uses browsers timezone settings.
Look at the documentation:
Timezones
- The AngularJS datetime filter uses the time zone settings of the browser.
- The same application will show different time information depending on the time zone settings of the computer that the application is running on.
- Neither JavaScript nor AngularJS currently supports displaying the date with a timezone specified by the developer.
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'm using ionic 1. I need date/time picker component that is the same as implemented in ionic 2.
I found this but it's not free.
I have no idea which date/time picker you have used, but in ionic 1 , you can use their built-in
In your html
<input type="date" data-date="" data-date-format="DD MMMM, YY" value="YOUR_SELECTED_DATE" ng-model="YOUR_DATE_MODAL">
furthermore, If you want to change the format of date you can change it via custom javascript function.
Please accept my apologies if i had any mistakes in my post. This is my first post here. But, i am not new to StackOverflow. Correct me if any.
I am using angular-bootstrap-datetimepicker library from the below url:
Link to library
I am currently embedding the calender on the page.
I am using angular.js, moment.js, grunt and bower. Absolutely no issue loading the calender and can even select a date and display the selected date as well.
Here is the sample code:
<div>
Selected Date: {{ data.embeddedDate | date:'yyyy-MMM-dd' }}
<datetimepicker data-ng-model="data.embeddedDate" data-datetimepicker-config="{ startView:'day', minView:'day'}" />
</div>
I am trying to highlight today's date automatically when the datetimepicker shows on the page.
As you can see, in the config options, i could set the default view and min view.
Note: I tried to mimic the working code (till now) in Plunkr but, its not showing the calendar. I added all libraries as well. Anyways, that's just for idea only. If i could get the Plunkr working, i will update again.
Here is the link to Plunkr.
Any suggestions (regarding highlight today date by default) will be appreciated.
To get the directive to show todays date by default, you can set the value of data.embeddedDate in the controller through its scope, like so:
$scope.data = { embeddedDate: new Date() };
Working Plunkr
I have a list of date in my view, powered by my controller. I am using angular-translate to manage localisation in my all application but do not know how to deal with date object.
My HTML looks like this :
<div ng-repeat="date in nextDates">
<div class="day">{{date | date: 'EEEE'}}</div>
</div>
This code display a list a day : Monday, Tuesday, ... based on date which is a date object.
My first try was to use moment.js which is already used in this project, and deal really well with i18n. It works, but I had a lot of difficulty to update it when lang is changed by user since moment.js is not related to angular-translate.
I tried to implement it on my controller using an event to update my variable but didn't worked well. I would like to keep the object date in my view instead of having a moment object, I am sure there is a way not implementing it manually.
$scope.$on('translationChanged', function(event, lang) {
...
});
I would like to know if there is an easy way to solve this issue, my only idea is to generate a key for translation like DAY.0 for Monday, DAY.1 and translate it by myself but it sounds cheap. moment.js seems perfect for the job, but then how to link it with angular-translate ?
Thanks for reading.
OK so after some research I found a library on github called angular-moment which work fine for me.
First I import both js files + locale
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-moment/angular-moment.js"></script>
<script src="bower_components/moment/locale/fr.js"></script>
<script src="bower_components/moment/locale/de.js"></script>
<script src="bower_components/moment/locale/it.js"></script>
Then I set up momentjs locale variable during my app mode config
var core = angular.module('app.core').config(configLang);
configLang.$inject = ['moment'];
/* #ngInject */
function configLang(moment) {
moment.locale('en');
}
I then can start using in my templates amFormat directive directly on my Date object
<div ng-repeat="date in nextDates">
<div class="day">{{date | amDateFormat:'dddd'}}</div>
</div>
If I want to change language in my app, I just use moment.locale(String); and my view is automatically updated.
$rootScope.$on('$authenticationStateChanged', function(event, userData, isAuthenticated) {
moment.locale(userData.currentLanguage.toLowerCase());
});
$scope.$on('translationChanged', function(event, lang) {
moment.locale(lang.toLowerCase());
});
I can then access all the power of moment.js in my angular app :D.
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