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
Related
I am using the below code to insert a date picker text box.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script>
function MainController($scope) {
$scope.date = new Date();
}
</script>
<body ng-app>
<div ng-controller="MainController">
<input type="date" ng-model="date" value="{{ date | date: 'yyyy/MM/dd' }}" />
</body>
Angular JS Calendar
I would like to if the below is possible to implement;
A. disable weekends selection
B. disable previous dates (starting yesterday)
C. disable 4 days including today (ex. if today is 12 then from 12 to 17 should be disabled - which includes weekends as well that are already disabled)
I have done this using JQuery Datepicker but not able to do it with AngularJS. Please help.
Attached screenshot of Jquery Datepicker.
Here you are relying on browsers' implementation of <input>, which is not very powerful. Using this, you can't grey out specific dates, only ranges using min and max attributes (which makes your B objective achievable).
There are several solutions from the AJS community, including:
ui-date, apparently a copy-paste of jQuery's picker you're used to (read the warnings though, they don't sell it as the best solution)
UI Bootstrap's datepicker seems more powerful and is referred to by ui-date's page - yet I don't see how you'd achieve A and C objectives using its options
the proven md-datepicker, which allows you to achieve B with md-min-date and md-max-date, and to achieve A, B and C with md-date-filter; demos are here (my personal favorite, in case it's not obvious enough ^^)
Are there any md-year pickers available? if yes, please share me some links. If no, then is it possible to turn a md-datepicker into a year picker?
I have tried with a normal one with giving modes, types of models etc but no useful output.
In the docs on <md-datepicker>, there is an option for a year picker by using the md-current-view attribute, setting it to either year or month:
<md-datepicker
md-current-view="year"
ng-model="myCustomYearDate"
md-placeholder="Enter Date">
</md-datepicker>
I have a problem with md-select (Angular Material Design v1.0.0).
When pressing the select, it freezes and I can't press on anything - it stays open!
<md-input-container flex>
<md-select ng-model="product.paymentCode" name="paymentCode" md-on-open="loadPaymentCode()" placeholder="Payment Code" required>
<md-option ng-value="rPaymentCode" ng-selected="rPaymentCode.id==product.paymentCode.id" ng-repeat="rPaymentCode in paymentCodes">{{ rPaymentCode.code}}</md-option>
</md-select>
<div ng-messages="createProductForm.paymentCode.$error" ng-show="createProductForm.paymentCode.$touched">
<div ng-message="required">choose payment code</div>
</div>
<tr-clear model-to-clear="product.paymentCode" ng-if="product.paymentCode"></tr-clear>
</md-input-container>
It worked before with this current version of angular material design. I've read all the CHANGELOG and nothing helped to figure it out.
I figured it out.. The problem was in the bower.json it was written like this
'angular-material': '~1.0.0'
and the first time when I did 'bower update' it updated to '1.0.0-rc4'
but the second time when I did 'bower update' it was 1.0.0 and it got wrong.
All the version 1.0.0-rc5 till 1.0.4 breaking md-select in my site.(I've checked each of them)
It still unclear how to solve the implemantaion of mdSelect in my site to fit the updated versions.
I suspect this what breaks;
"select no longer overflows window, resizes from small to big correctly"(version 1.0.0-rc5)
The Change Log
https://github.com/angular/material/blob/master/CHANGELOG.md
I hope someone could help me understand how to fix it so I could upgrade to the newest version.
Thank you, Diana.
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 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