I forked the Plunker code from the AngularUI Bootstrap pages (the Datepicker example). I wanted to implement a max date range so you can only select a date in a certain period. You can find the Plunker here: http://plnkr.co/edit/vBrgyC20FBEUzuoprhlh?p=preview
Somehow, the maxDate attribute does not seem to be working while the minDate one does. Does anyone know if I'm doing something wrong here or if it's just a bug?
Your HTML in the plunker
<datepicker min="minDate" show-weeks="showWeeks"></datepicker>
What it should have been
<datepicker min="minDate" max="maxDate" show-weeks="showWeeks"></datepicker>
Seems you just forgot to add the max-attribute?
You have two date pickers in there. :)
<datepicker min="minDate" max="maxDate" show-weeks="showWeeks"></datepicker>
Worked for me as well, i was struggling with the attribute max-date", Thanks ivarni for your answer
Related
I'm using Angular Material Datepicker, and I'm trying to display the "year" view (which display months instead of days) when opening the datepicker :
<md-datepicker required ng-model="departureDate"
md-current-view="year"
md-placeholder="Date de départ"
md-open-on-focus class="col-md-6"></md-datepicker>
<md-datepicker required ng-model="leavingDate"
md-current-view="year"
md-placeholder="Date de retour"
md-open-on-focus class="col-md-6"></md-datepicker>
However, It doesnt work. I searched over the git repo issues, didn't find any solution about that, nor any reason why it behave like this.
I had exactly the same issue and was using version 1.1.0.
I upgraded to 1.1.8 and the issue was fixed straight away.
Hope that helps,
Sam
I have a question concerning angular-datepicker
I can't get the max-date functionality to work on my project. I've tried several ways to pass the maxDate variable (set to current day = new Date() ) but nothing happens.
This is my markup:
div class="date-picker"
id="calendar_to"
date-picker="calendar_to"
watch-direct-changes
date
after="calendar_from"
before="calendar_to"
min-view="date"
max-view="date"
max-date></div>
I tried max-date="maxDate", max-date="{{maxDate}}", max-date="{maxDate}", max-date="{new Date()}", etc..
And I tried declaring maxDate in the controller and in a directive.
Which is the right way to do this? Haven't found a a solution in the documentation nor in the various issues reported.
Any help out there?
Thanks
In HTML: "datepicker ng-model="date" name="Date" min-date="minDate" max-date="maxDate" date-disabled="disabled">
In the controller set:
$scope.maxDate=new Date(yyyy,mm,dd,hr,min,s);
This help me for date picker,
Now in this date-picker i want today's date as selected by default.
can anyone help me how do set default date?
Thank you.
In andgular material i have used this for datepicker and my issue of set current date is solved as follow,
Using AngularJs Controller,
HTML:
<input type="date" list="days" ng-model="transaction.date">
Javascript:
$scope.transaction.date = new Date();
(1) google components
(2) datepicker demo
(3) material demo
Standard date field with datepicker-popup from UI Bootstrap.
Setting date programmatically - no problem. But after ANY change it is marked as $invalid and stays $invalid even format is correct and I edit it to previous value (which was correct in the beginning). Why?
<form name="form">
<input name="testDatepicker"
ng-model="testDatepicker"
placeholder="dd-MM-yyyy"
datepicker-popup="dd-MM-yyyy"/>
<div style="color:red;font-weight:bold;"
ng-show="form.testDatepicker.$dirty && form.testDatepicker.$invalid">
Invalid date
</div>
</form>
JSFiddle: http://jsfiddle.net/yoorek/mug2e381/
Apparently there is a bug in UI Bootstrap: https://github.com/angular-ui/bootstrap/issues/3835
Upgrade the version to the latest one. It has at least been resolved in version 0.14.3.
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