Consider the following setup: I have a form with a angular-bootstrap datepicker (uib-datepicker-directive), which I want to serve with different languages, such that dates are shown in different formats.
I am changing the locale dynamically with the angular-dynamic-locale-module, by using information from the state parameters.
A date object is printed with correct language-specific format using the angular date filter: {{vm.date | date:'fullDate'}}
Unfortunately the formatting for the datepicker is not working immediately. When loading the page and call a set-locale function it needs a click into the datepicker to adjust the format of the month and click to the month and back to additionally adjust the translations for the weekdays.
I have created a plunkr to demonstrate the behaviour.
http://plnkr.co/edit/2HA8LI5SzUqx2jSmUdjn?p=preview
Does anyone know this behaviour? And if so, is there a way to fix this, preferably without messing up the datepicker directive?
Thanx in advance, micoud
Related
data-datetimepicker-config="{ dropdownSelector: '#taskDateTo',
minView: 'day',
startView: 'day' }"
This is the code. If I change this JSON to a method call, it does not change the date picker configuration when the method returns different values.
Basically, I want to be able to change from day -> month -> year view based on the value selected in another combo box.
This description should be adequate to anybody familiar with the control. I did post a question on the git forum, which does not have the stack overflow police - somebody did answer. Changing the code to use a scope variable instead of method did not fix the issue.
Have a look at the configureOn option. Essentially, you $broadcast an event when you want the directive to re-read it's configuration.
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
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
date input is not showing the date until the user change it
// showing the date
<p>{{someDate | date}}</p>
// not showing the date. instead showing mm/dd/yyyy.
// but value will change when use change is
<input type="date" ng-model="someDate">
example code in jsbin
it IS working on version 1.3.0-beta.3, but
I need it to work on stable version 1.2.14.
is it possible?
I've created a simple directive to enable standard input[type="date"] form elements to work correctly with AngularJS ~1.2.16.
Please look here for details:
https://github.com/betsol/angular-input-date
And here's the demo:
http://jsfiddle.net/F2LcY/2/
Hope it helps!
I think the answer is you must upgrade to angularjs 1.3 or newer. Details in angular.js/pull/5864. The commit implementing this is pretty large to try to backport to 1.2 IMHO.
Try converting the someDate scope variable from string to Date format and then if you use input type="date" ng-model="someDate" . This solved my problem .
config(function (datepickerConfig, datepickerPopupConfig)
{
datepickerConfig.showWeeks = false;
datepickerPopupConfig.toggleWeeksText = null;
datepickerPopupConfig.dayFormat = 'd';
});
does not work to format the datepicker day without the padded 0 - other config options are setting correctly, but my days still have a leading zero, which is messy.
Are there other means of formatting the date?
You need to trim the returned JavaScript date object:
day = day.replace(/\b0(?=\d)/g, '')
I don't know if this is the same thing you were asking, but I ran into an issue where specifying those options worked fine for the text-input, but I wanted to remove the leading zeros from the day in the datepicker-popup menu. The popup doesn't honor the date format, so what I ended up doing was overwriting the template for the datepicker in the template cache. Specifically, I overwrote
"template/datepicker/day.html"
And I just copied and pasted the old template, and in that html string look for {{dt.label}}. This is the field that is getting set with a leading 0, so to remove it I simply piped it through angular's number filter- {{dt.label | number}}. Works like a charm.
You can either modify the existing ui-bootstrap-tpls.js file in your project, or overwrite that template somewhere else. I opted for the latter since we automatically update our bootstrap files.
The only worry is now you have to keep an eye on bootstrap updates, since a change to the datepicker might affect you (although I think this is minimal and also it should be easily testable since you're only changing the template cache and not any datepicker code).