Disabling future date in daterange picker using moment.js - javascript

I have a daterange picker in my HTML file
<input date-range-picker class="form-control date-picker" type="text"
ng-model="datePicker.date" options="onApplyDateRange"/>
I want to know that is it possible to validate it using moment.js .I have been trying to validate it but I'm not able to get it working. Please help
I have used https://www.npmjs.com/package/angular-daterangepicker https://github.com/fragaria/angular-daterangepicker

you can try using max in the html and get the maxdate from controller
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker.date" max="maxdate" options="onApplyDateRange"/>
Controller
$scope.maxdate = new Date();

Related

How can we make all the past dates in the calendar unselectable?

I had a html5 calender of type="datetime". I want the past dates to make unselectable.
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
datepicker-options="dateOptions" min-view="date" maxlength="10" format="dd/MM/yyyy"
ng-model="$ctrl.DateInput" required="true">
All the dates inside the rectangle should be in disable state.
Can someone help me?
With Javascript, you can set the min attribute of the date control. You can also set this from your ViewModal.
var today = new Date().toISOString().split('T')[0];
document.getElementsByName("date-control")[0].setAttribute('min', today);
<input name="date-control" type="date">

ng-model value is not coming in date filter using angular js

I am doing angular js search between from one date to another date using date picker .
I have made it ,every thing working fine .
But i am not getting the dynamic value of the date .which i have selected from the date picker .
I have passed two static date of given format its working fine.
I am not getting why it is not coming .
Below is the code.
<tr class="gradeU" ng-repeat="x in invoice| dateRange : from_date : to_date ">
This above one not working .
If i am using this one its working .
<tr class="gradeU" ng-repeat="x in invoice| dateRange : '2016-11-20' : '2016-11-25'">
Dont know why ,
i have passed it in ng-model also
<div class="col-sm-2 m-b-xs">
<input type="text" name="from_date" class="form-control" placeholder="From" date-time view="date" auto-close="true" min-view="date" ng-model="from_date" format="YYYY-MM-DD" />
</div>
<div class="col-sm-2 m-b-xs">
<input type="text" name="to_date" class="form-control" placeholder="From" date-time view="date" auto-close="true" min-view="date" ng-model="to_date" format="YYYY-MM-DD" />
</div>
Can anybody suggest me,what is the error?
Thank you in advance.
Try using new Date(from_date) to see if the variable contains a valid date
This will also convert the variable type into Date type if the variable contains a valid date as well

From date , To date validation in angular js

This is my code
<tr ng-show="option == 'Yearly' || option == 'Date'">
<td>
<label>From:</label>
</td>
<td>
<input type="date" ng-model="fromdate" id="fromdate" date-picker />
</td>
<td>
<label>To:</label>
</td>
<td>
<input type="date" ng-model="todate" date-picker />
</td>
</tr>
I have a jquery date picker for fromdate and todate, I need to disable all the dates in the end date which is lesser than the from date.....
I have used https://github.com/Eonasdan/bootstrap-datetimepicker
previously and minDate and maxDate options can probably be helpful for your use case, if you want to look at another plugin.
Sample usage to set maxDate, minDate:
html:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
js:
$('#datetimepicker1').datetimepicker({
maxDate: new Date("6/8/2016"),
minDate: new Date("6/2/2016")
});
Working Plunker
Note: This plugin has dependency on bootstrap, jquery, and momentjs
Edit:
There is also a angular wrapper directive over this: https://github.com/diosney/angular-bootstrap-datetimepicker-directive
If you are just wanting to set a specific min date like todays date you can put that in as a setting.
https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
If you have an easy way of setting your min date to be todays day you can just use a variable as such min="{{minDate | date:'yyyy-MM-dd'}}"). Note that min will also add native HTML5 constraint validation.
In theory this doesn't require a controller but just a app setup config for $scope.minDate, all that is going to do is note that your date is not correct next to the field with whatever validation you have set, field and form validation is a whole different animal then what you are asking but I would read https://docs.angularjs.org/guide/forms on it.
In the long run I wouldn't use jquery date picker and use a native directive like https://angular-ui.github.io/bootstrap/ Date picker or Angular Material https://material.angularjs.org/latest/demo/datepicker

How fill up the datepicker form with string date?

From database I get data in format like (let's suppose it's a string)
1974-07-05
How I need to pass the date in form with datepicker and make the date active there, so how can I do it?
<td>
<script src="javascript/datepicker.js"></script>
<input id="datepicker" type="text" name="dob" value="${person.bdate}">
</td>
and ${person.bdate} is a string date
This is not an answer, just an observation.
You have requested a pure javascript solution, but you are using a plugin. Why not use jQuery and jQueryUI's datepicker plugin. Look how easy the code would be:
jsFiddle Demo
HTML:
<input id="datepicker" type="text" name="dob" value="">
jQuery:
var dd = '1974-07-05';
$('#datepicker').val(dd);
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd'
});
Sources:
http://jqueryui.com/datepicker/#date-formats

angular-ui bootstrap datepicker (how to disable only today button on popup)

I have 2 dates : StartDate and EndDate using angular-ui-bootstrap datepicker
When I choose a startDate (greater than today date) I set the min-date of EndDate datepicker at the startDate. So all dates <= startDate are disabled.
But the Today button in popup of EnDate can set today date which is not conform business rule.
Is there a way to disable the the Today button without disabling all the button-bar?
Sample HTMl for that:
ng-model , ng-change and min-date
<input type="text" uib-datepicker-popup="dd/MM/yyyy" ng-model="personForm.StartDate" name="startDate" ng-change="myStartDateChange()" />
<input type="text" uib-datepicker-popup="dd/MM/yyyy" min-date="endmindate" ng-model="personForm.EndDate" name="endDate" />
add function in your controller:
$scope.myStartDateChange = function () {
$scope.endmindate= $scope.personForm.StartDate;
}
you should update ui-bootstrap version to 0.14.0 or laster.
it could be fix this bug.
https://github.com/angular-ui/bootstrap/pull/4199

Categories