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();
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 don't understand why date-min="dateMin" with $scope.dateMin = new Date(); doesn't work... But if I use datepicker-options, it works fine. Why?
Here is an example:
plnkr datePicker minDate example
As you can see at angular bootstrap Datepicker documentation there is no date-min but only minDate at datepicker-options as you use it.
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
When using the Angular UI datepicker in the edit view of the form, until I change the date of the input box the date is not getting passed through Angular UI.
Eg : If the existing date value is 16-September-2014
If I just POST the data without clicking on the datepicker the value I get in javascript is
'16-September-2014'
But if I first select the datepicker and change the date the final value I get in javascript is
'2014-09-06 00:00:00'
This is library I am using
http://angular-ui.github.io/bootstrap/
Try this on your code.I am not sure, but it may solve your problem.
$scope.toDay = new Date();
$scope.date = $scope.toDay;
Now bind $scope.date in your HTML/Jade using ng-model.
data-ng-model="date"
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 .