I am using Angular md-datepicker for startDate and endDate.
I need my startDate to equal currentDate and disable previous dates. Similarly user can choose endDate only after startDate.
In md-datepicker, you can set the minimum date using md-min-date. In your controller you can set a $scope variable like:
$scope.today = new Date()
and in view just use
<md-datepicker ng-model="startDate" md-placeholder="Enter date" md-min-date="today"></md-datepicker>
And for choosing endDate only after selecting startDate, you can make use of ng-disabled in the second date picker till your startDate model is set. So your second datepicker directive will look like
<md-datepicker ng-model="endDate" md-placeholder="Enter date" md-min-date="startDate" ng-disabled="startDate.length == 0"></md-datepicker>
Hope this helps.
Related
I'm using an existing directive to select start date and end date.
Requirement:
End Date always should be equal or greater than Start Date.
User may select start date as a future day or old day. min date of the End Date time picker should be set disabled based on start date selection.
Can anyone suggest me, how to set min date for end date dynamically based on start date?
start Date:
<input singledatepicker class="form-control" selected-date="startDateTime" placeholder="Date" format="DD/MM/YYYY" required readonly style="background:white;" max-date={{pastDate}}>
End Date:
<input singledatepicker class="form-control" selected-date="endDateTime" placeholder="Date" format="DD/MM/YYYY" required readonly style="background:white;" min-date={{IwantToSetThisValue}}>
From the documentation of daterangepicker, we can see that, there are options available to set
> minDate: (Date or string) The earliest date a user may select.
> maxDate: (Date or string) The latest date a user may select
but these values need to set while initializing the daterangepicker object. and u need to update this min date, according to the start date.
As this daterangepicker library not providing any methods to update the option on runtime, one quick solution is to reinitialize the 'end date picker' option with value of 'start date picker'.
You watch the start date model value and reinitilize the end date picker on the value change, something like this:
$scope.$watch('startDateTime', function (startDateValue) {
if (startDateValue) {
$('#endDateTime').daterangepicker({
minDate: startDateValue // Do corrections according to the requirements
});
}
});
Note: I'm not sure what your singledatepicker directive is doing, This is just a workaround, not the perfect way, But hope you got the idea.
Hello I have an issue with angular js material date picker not showing date correctly cause it's always one day less than the selected date. Here is my date picker
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" ></md-datepicker>
Is there a way to fix this? Please check this codepen:
https://codepen.io/anon/pen/yoWdOY
I am using md-date picker in angular js ng-material.I want to show the To date based upon From date.(Eg.If am selecting Aug 27, 2018, in From date-column then I have to disable before 27aug 2018 in the To date picker.Here am disabling past date in From Date column using md-min-date="vm.minDate" For this vm.min date i write code in controller
<md-datepicker
ng-model="field.start_date"
md-min-date="vm.minDate"
md-placeholder="Date From"></md-datepicker>
</md-input-container>
<md-datepicker
ng-model="field.end_date"
md-placeholder="Date To"></md-datepicker>
</md-input-container>
Please provide any solution for me.How to disable To date based upon choosing date in from date
Without the full code, it's hard to know for sure, but based on the fragment above
<md-datepicker
ng-model="field.end_date"
md-min-date="field.start_date"
md-placeholder="Date To">
</md-datepicker>
I need to make sure selected dates on ng-bs-daterangepicker are in the past.
Here is an example:
I have FROM and TO dates, I need to select dates to show in a graph.
With the first picker I need to set the "FROM" date, which has to be in the past and on the second picker I need select the "TO" date, this date should not be less than the FROM date, neither greater than today's date.
I tried this:
<input
type="daterange"
ng-model="dates"
format="L"
separator="/"
max-date={{todyDateRangeChart}};
opens="left"
/>
and in ctrl
$scope.todyDateRangeChart = new Date();
Here it is in Plunker
Fixed max-date.
They seem to worked only with string dates.
<input
type="daterange"
ng-model="dates"
format="L"
separator="/"
min-date="{{minDate}}"
max-date="{{maxDate}}"
opens="left" />
And in controller:
$scope.minDate = '2013-08-01';
$scope.maxDate = '2013-09-30';
Few additional changes to the controller: I also changed the order or scripts - angular is just a bit before ng-bootstrap-datepicker. And added the controller as ng-controller.
Plunker
I am using the AngularUI datepicker.
I have two datepickers that influence each other. One is for example a "start date" and the other is an "end date". Instead of creating validation for both datepickers, I want to eliminate the option of having invalid dates (i.e. end date earlier than the start date and vice versa).
Is there a way to re-trigger the date-disabled attribute on select of a date? (re-trigger the date-disabled of the OTHER datepicker)
My plunkr: I have a start and end date, as you can see when you open each date picker, you cannot pick a start date higher than the end date and vice versa. However if I change my start date to 11/21, I want the end date's datepicker to update so that the 11/20 is no longer clickable. Is there any way to do this?
http://plnkr.co/edit/TgisJnSwQItDeCuIReLL?p=preview
It is possible to do this using min and max attributes in combination with watching pickers' values.
Look at http://plnkr.co/edit/W5pb1boMLOHZFnWkMU8o?p=preview
You really don't need all the javascript.
here is a fork of the previous solution.
http://plnkr.co/edit/kXkzCeBTlxOpOyZKfTiN
if you have two inputs such as
<input id="getTSStartDateInput" ng-model="StartDate" type="text" class="form-control ng-pristine ng-valid ng-valid-required" datepicker-popup="dd MMM yyyy" required="required" ng-required="true"/>
<input id="getTSEndDateInput" ng-model="EndDate" min="StartDate" type="text" class="form-control ng-pristine ng-valid ng-valid-required" datepicker-popup="dd MMM yyyy" required="required" ng-required="true"/>
it will automatically work and disable any end date that is before the start date
notice the ng-model="EndDate" min="StartDate", that is all you need.
I have used a simple solution of adding ng-change in both the startDate and the endDate. If the startDate changes then set the minDate of endDate to startDate and same goes for endDate. Hope that helps