From date , To date validation in angular js - javascript

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

Related

How to remove the "Today's date" button from a datepicker?

I am trying to remove the button on the bottom of the HTML default date picker. I can't seem to find a way. The Button says: "Today"
<div class="form-group" id="datepicker">
<label id="WinterStart:" for="usr">Winter: </label>
<input type="date" class="form-control" id="winterStartFrom:" min="2019-11-10">
</div>
It may be your browser delivered setting,
Try with this or this
This will give you a custom date pickers.

Thymeleaf and DatePicker: set min Date

I would like to set a minimum selectable date in my datepicker, using thymeleaf.
I try to set it by this code:
<label th:utext="#{${name}}" th:for="${name}" class="control-label"></label>
<div class="input-group input-group-prepend">
<span class="input-group-text far fa-calendar-alt"></span>
<input type="text" th:id="${name}" th:name="${name}" th:value="${value}" th:placeholder="${placeholder}" class="form-control" onfocus="(this.type='date')" min="${minDate}"/>
</div>
But this code min="${minDate}" is ignored.
There is a way to do that I want with thymeleaf or I can do it only by javascript?
Thanks
You can try using th:attr as below
th:attr="min=${minDate}"

show invalid messages on entering wrong input

I have written a code stuff using bootstrap-datetimepicker which has two datetime picker start and end. Code is working fine but I don't know how to show validation to the date time textfield. say for example in the datetime picker textfield when I enter some invalid date, it should validate and show invalid date. How can we achieve that.
Can anyone please help me on this
My code is as given below
JSFiddle
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Check out the docs regarding options: http://eonasdan.github.io/bootstrap-datetimepicker/Options/
I've never used this plugin but it looks like passing some of these in would allow you to set validation parameters and not have to write too much more code.
Things like:
format (using moment.js notations)
minDate & maxDate
disabledDates
and looks like useStrict might also be helpful depending on what your requirements are.
Yo. validate.js is very easy to implement. It's also very easy to customize.
Simple demo here.
$(document).ready(function(){
$("#form").validate();
});
Read more about Validate.js

Angular Material design date format

I'm working with angular material design. (https://material.angularjs.org/#/) I have the following piece of code:
<md-input-container padding>
<label>Some date</label>
<input ng-model="searchQuery.SomeDate" type="date" name="invoiceDate" />
</md-input-container>
This gives me a very nice text-box with a datepicker. The user is able to type the date manually or pick a date from the datepicker. Problem is that based on the ui culture the user must type in either dd-MM-yyyy format or MM-dd-yyyy format.
I do not want this. I want to force the dd-MM-yyyy format. But I don't know how to. Do you?
Thanks in advance!
If you include a script from i18n, you can directly set your date param to your country's convention.
This is the list of files : https://code.angularjs.org/1.0.8/i18n/
Then a simple include will work :
<script src="http://code.angularjs.org/1.0.8/i18n/angular-locale_XXXX.js"></script>
You want something like this:
User sees dd/MM/yyyy, but in program it is a date?
I use it like this:
<span class="input-group">
<input type="text" datepicker-popup="dd/MM/yyyy" is-open="opened" close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</span>
and data sent into model is formated after dd/MM/yyyy

bootstrap datepicker from eternicode not selecting date

I'm working on this input right now using bootstrap 3.0 and bootstrap-datepicker from eternicode.
The problem is that I'm having by default the input to be disabled, because I do not want the user to be modifying the date by his hand.
I'm assigning an input addon with a glyphicon of a calendar to show the datepicker. The problem though is that whenever I select a date, the input doesn't receive the date. I've been going through the docs and there's a way to do it, but it is with Bootstrap 2.3.2 only.
Here is my code, does anybody know how can I transfer the selected date from the datepicker into my disabled input?
Help will be much appreciated!
html
<div class="form-group">
<label class="control-label" for="fechaTandas">Fecha</label>
<div class="input-group">
<span class="input-group-addon date" id="trigger-datepicker"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" name="fechaTandas" disabled="disabled" id="fechaTandas" placeholder="seleccione una fecha">
</div>
js
//JS to trigger the datepicker
$('#trigger-datepicker').datepicker({
format: "yyyy/mm/dd",
language: "es"
});
This is the link to eternicodes datepicker plugin:
http://eternicode.github.io/bootstrap-datepicker
I think you need to handle the DatePicker's change event..
$('#trigger-datepicker').datepicker()
.on("changeDate", function(e){
$('#fechaTandas').prop('disabled',false);
$('#fechaTandas').val(e.format('yyyy/mm/dd'));
$('#fechaTandas').prop('disabled',true);
});
Demo: http://bootply.com/88516

Categories