My goal is to make the angular date-picker pick the end of a the selected year and present the 31.12th of this year.
I´m using moment.js.
My code:
scope.ngModel = moment(scope.ngModel).endOf('year');
In my controller it´s:
2013-10-28T10:00:00.000Z
for the time.
When I load the page, it´s "2013-12-31T22:59:59.999Z" -> Perfect!!
But when I´m selecting another year via the date-picker, e.g. 2002, it´s:
"2002-01-01T11:59:59.000Z"
and there´s always the 01.01. of the year.
Any ideas?
Without any refactoring just moment().subtract(1, 'day') one day each time problem occurs or simply after manual picking :D!
Related
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 was looking at the Angular Material documentation for date picker. I was wondering if there is any way to show only the years in the date picker? Appreciate it if someone could help me out with it.
With md-datepicker Selecting only year is not possible, month year format is possible using md-mode="month".
DEMO
there is a little feint you set the datepicker opened to false , after year selected
chosenYearHandler(normalizedYear: Moment,datepicker: MatDatepicker<Moment>) {
// your code
datepicker.opened = false
}
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
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