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
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.
I am using the Angular Moment Picker library and trying to set a custom date in the input field whilst also trying to prevent the user from selecting a date in the past.
My element looks like so:
<input class="form-control"
moment-picker="endTimePicker"
name="campaignEndDate"
locale="en"
format="MMMM Do YYYY, h:mm A"
today="true"
start-view="month"
min-date="minDate"
ng-model="endTime"
ng-model-options="{ updateOn: 'blur' }"
ng-required="!campaign.NeverEnds"
style="width: 60%;"/>
And my controller:
$scope.minDate = moment();
$scope.endTime = moment( $scope.campaign.EndTime );
When I open the form, the Angular Moment Picker shows today's date/time in the input field, even though $scope.endTime is showing a date in the past.
The only way I can seem to get the correct date showing in the input field is to set validate="false" on the element, but then the control doesn't pass validation because the date is a date in the past.
What I am trying to achieve is to show an initial date (2020-07-29 02:14:00) when the user opens the form, but if they try and change the endTime, then cannot select a new date in the past.
Is this achievable somehow?
Okay, after playing around with this some more, and going back over the documentation, I found the best approach to achieve what I wanted was to implement a selectable method:
angular-moment-picker#methods
I removed the min-date="minDate" which allowed the Moment Picker to then show the correct date in the input field and then added a selectable="isSelectable( date )" to the element to filter out and disable any previous days:
$scope.isSelectable = function( date ) {
// Disable all previous days
return date >= moment();
};
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.
Here's my html code:
<label>D.O.B: </label>
<input type="date" ng-model="dob">
In the Browser, datepicker pops up, when I pick a particular date and try to display, both date and time are displayed,something like this "2016-04-02T18:30:00.000Z".
My question is what should I do, so that only Date gets saved(i.e. excluding time)?
In Javscript there is no Date-only type. So instances new Date() always contain time. You should ignore them in code where you treat it.
When date is displayed in angular app you can use a filter, ex.:
<div>value = {{dob | date: "yyyy-MM-dd"}}</div>
As an option you can zero time part by dob = dob.getDate() before sending it somewhere...
I am using angular bootstrap datepicker. Everythings works fine but when I select any date like 20-march-2015 it showing me 19-march-2015(one day less from selected day).
Here is my code in Plunker
This is a daylight saving issue.
Do you get the same issue with dates in February.
Looking at your example you can see the date is
OutPut: "2015-04-26T23:00:00.000Z"
For today :)
if I select 1st Jan, I get
OutPut: "2015-01-01T00:00:00.000Z"
Change your SPAN to
<span>OutPut: {{formData.dueDate | date : 'dd/MM/yyyy'}}</span>
And your good ( note the | date : 'dd/MM/yyyy' )
Actually you don't need datepicker. Delete datepicker and use type="date".
<input ng-model="formData.dueDate" type="date" id="dueDate" name="dueDate"
class="form-control" ng-click="data.isOpen = true">
Example