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
}
Related
I tried creating an ionic form in which the DateTime component is used. I want to disable all future Saturdays and Sundays from the date picker. Is this possible?
My code is given below
<ion-item>
<ion-label>Select Date</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" min="2018-03-26" max="2020-10-31"></ion-datetime>
</ion-item>
Please help?
Looks like it is not possible to disable particular days (weekends/weekdays) using ion-datetime of ionic3.
Check out documentation for more functions and information:
https://ionicframework.com/docs/api/components/datetime/DateTime/
Alternatively, you can do it with libraries like this : https://github.com/rajeshwarpatlolla/ionic-datepicker
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.
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!
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 am using angular 1.0.8.
I want to use angular ui datepicker. I want to set minimum date to yesterday.
I had tried min-date option like "min-date='-1d'" but it's not working.
Does anyone have this issue? I need help in setting min-date option.
Thanks and regards,
Jay Patel
I am using angular.ui 0.10.0 version and it's having "min" instead of "min-date".
I changed "min-date" to "min" as per comment and it's working properly
In your Controller you can write ,Use the latest version of date picker from Angular UI it will work , its an example of date of Birth selection
min-date="'01/01/1901'" max-date="maxDate"
$scope.toggleMax = function() {
$scope.maxDate = $scope.maxDate ? null : new Date();
};
$scope.toggleMax();