We Keep Coding

Disabling future date in daterange picker using moment.js

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();

How to use on-change event for textfield to make it empty if min-date condition fails

I had an input field with type="datetime" where it has min-date condition as todays date.The flow is, if the date is valid,then submit button is enabled or else it will be in disabled state.Its working fine.
But now if the user selects the date which is invalid(old date),the date will be displayed in text box but the button will be disabled.
I want to use ng-change such that if user selects invalid date(old date),on-change event should make the text field as empty and want to display error message..How can we get this ng-change working
Html:
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-date="{{today}}" min-view="date" maxlength="10" format="dd/MM/yyyy"
ng-model="$ctrl.newClient.DateInput" required="true"
ng-change="$ctrl.checkdate">
controller:
$scope.today= new Date().toISOString().split('T')[0];
this.checkdate=function(){
};
Can someone help.Thanks

You can use angular-pikaday, it's easier to manage dates with this lib, so the user can select the date and you can manage it after the selection on a calendar. With pikaday you can set the min selectable date, so you can delete your checkdate function.
Read also How can we make all the past dates in the calendar unselectable? . Maybe it's another solution :)

A more user friendly solution is using datetime-local and min attribute which does not let the user to select a date before that.
Example:
<input type="datetime-local" id="exampleInput" name="input"
ng-model="example.value" min="2017-01-01T00:00:00" />
Working Plunkr

jQuery datepicker maxDate issue

I have the following code for jQuery datepicker
$('#startDate').datepicker({
format: "dd/mm/yyyy",
maxDate: '0'
})
.on('changeDate', function (ev) {
$('#startDate').datepicker('hide');
});
It launches in a Bootstrap modal. It is working as expected apart from the maxDate - I want to restrict user from entering any date in the future - is there something I am missing? I also tried maxDate : new Date() which also did not work. And I did a hard reload and have checked Dev Tools and I can see the java-script in the rendered markup is as expected.
Updated with full html markup.
<input id="startDate" placeholder="Select Date" data-provide="datepicker" class="datepicker ng-valid ng-touched ng-dirty ng-valid-parse" readonly="readonly" style="cursor:auto; background-color:white" ng-model="item.startDate" ng-change="startDateChanged(item.startDate)">
Using jQuery 1.10.2 and Angular 1.4.1

Hope this will work for you
$( "#datepicker" ).datepicker({
format: "dd/mm/yyyy",
maxDate: 0
});

Do you want to Prevent the user from typing a date into the text box then add readonly='true' in your Textbox.
HTML
<input id="Datepicker" type="text" readonly='true' />
Demo : Click here

Lesson learned is to search what libraries other devs add to the project and dont assume its the one you have used in the past - I have used jQuery Datepicker in nearly every other place I have developed. This particular Dev had included bootstrap js datepicker. The options for it were endDate and also there is an option for autoclose so I can even get rid of the 'on' event handler which was doing the hiding
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html

How to show a date only upto today's date in HTML?

I have a date input box like this:
<input type="date" id="start_date" name="start_date" class="text_search" />
This displays the date box up to anywhere in the past and future date. Past date is fine but I don't want to show the future date. For example if today's date is May 31, 2013, user can only choose the date upto May 31, 2013. How can I do that?

Use the max attribute as in <input type="date" name="bday" max="1979-12-31">. You can use javascript to set this attribute to today or set it on the server side

are you using any jquery ui plugin ? if yes then use following code,
$(function() {
$("#start_date").datepicker({maxDate: '+0d'});
});

how to apply a condition on selected month from datepicker in html5

I want to apply a condition on selected date from date picker in html5. i.e. if i have selected jan month and click on submit button it will go to next page and show u were born in jan month.
<form action="new.html">
<input type="date"> <input type="submit" value="Submit" />
</form>

Have you considered using jquery's datepicker? It will provide your end user a much better experience with the ability to dropdown a calendar and also works in all browsers. Here is the code to do so:
$("#datepicker").datepicker(
{
onSelect: function (arg) {
var date = new Date(arg);
// The below code give the index of the month like Jan as 0, ... ,Dec as 11
var month = date.getMonth();
}
}
And in your body tag,
<input type="text" id="datepicker" />
For more info on the jquery datepicker, refer to this link: http://docs.jquery.com/UI/Datepicker
Here are some good faqs on datepicker if you decide to use it: http://jqfaq.com/category/widgets/datepicker/