I'm having some troubles using date-picker in angular-material version 1.1.1, if I change to angular material 1.1.0 the calendar works, as I put on codepen: http://codepen.io/lhrossi/pen/eBQLoy
here is my HTML:
<md-content md-theme="infocargas" layout-padding>
<form name="newDeliveryForm">
<div layout-gt-xs="row">
<md-input-container class="md-block" flex-gt-xs>
<label>Operador Logístico (Bloqueado)</label>
<input ng-model="company" disabled />
</md-input-container>
</div>
<div layout-gt-sm="row">
<md-input-container flex-gt-sm>
<label>Digite CTe</label>
<input ng-model="delivery.cte" />
</md-input-container>
</div>
<div layout-gt-sm="row">
<md-input-container flex-gt-sm>
<label>Entrega Para</label>
<!--<md-datepicker ng-model="myDate"></md-datepicker>-->
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
</div>
<md-button class="md-raised md-primary">Gerar Código</md-button>
</form>
</md-content>
This is a bug, or there is other thinks to do? I'm afraid to change the material version to not bug other things on the system.
I appreciate any help.
Angular 1.6 introduces some optimizations on the compiler that break the functionality of the datepicker (they are listed as breaking changes in the Angular changelog).
While the Angular Material team doesn't release a new patch version (that could be in a year or two...) it won't work, but you can disable the some angular optimizations to go back to the previous behaviour, as described in this issue on the Material repo.
angular.module('myApp', []).config(function($compileProvider) {
$compileProvider.preAssignBindingsEnabled(true);
});
Basically, what you do here is configuring the $compileProvider to work as it usually did. If you don't make this, then the initialitation code of the components is expected to reside on the $onInit() callback, as stated in this breaking change on Angular's changelog
Related
I am using md-date-picker in angular js.It allows typing characters and numbers.How to avoid entering numbers or texts in date-picker without disabling the date-picker.Please help me regarding this.
<md-input-container flex>
<md-datepicker md-open-on-focus ng-model="field.start_date" readonly="readonly"
md-min-date="vm.minDate" ng-change=" vm.getdata(field.start_date)"
md-placeholder="Date From">
</md-datepicker>
</md-input-container>
There is a work around for this issue, until angular-material updates this. You could use onkeydown="return false". It works pretty well.
<md-input-container flex>
<md-datepicker md-open-on-focus ng-model="field.start_date" readonly="readonly" onkeydown="return false"
md-min-date="vm.minDate" ng-change=" vm.getdata(field.start_date)"
md-placeholder="Date From">
</md-datepicker>
Hope it will help!!
I have a form with some md-select dropdowns which im trying to bind with a scope object in my angular controller.
The html looks like that :
<div id="horizontal_form_category" class="row">
<div class="col-md-2 col-lg-2" data-ng-repeat="r in categories[general]" dir="rtl">
<md-input-container>
<label> {{ r.name }} </label>
<md-select ng-model="formObject[r.name]" class="md-no-underline">
<md-option ng-repeat="option in r.values" ng-value="option "> {{ option }} </md-option>
</md-select>
</md-input-container>
</div>
</div>
The controller has a definition of the object $scope.formObject = {}; (Although it should work without it)
But, unfortunately, the $scope.formObject object in my controller stays empty.
Any ideas what could cause such weird behavior ? I have some normal bootstrap components whom ng-model is written the same and are working just fine.
Thanks
Does this help in any way? - CodePen
The true as the last parameter for $watch checks for changes in the object formObject.
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-input-container>
<label> Options </label>
<md-select ng-model="formObject['Options']" class="md-no-underline">
<md-option ng-repeat="option in options" ng-value="option "> {{ option }} </md-option>
</md-select>
</md-input-container>
</div>
JS
angular.module('MyApp',['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.options = ["Earth", "Saturn", "Jupiter"];
$scope.$watch("formObject", function () {
console.log($scope.formObject);
}, true)
});
Apparently there wasnt any bug.
My form's md-select were empty and therefore the formObject was empty.
The minute I started puting values, the formObject got filled, one field at a time, containing only the fields that were set.
I added a default value and everything is now showing correctly, just to be sure this was the "bug".
In retrospect, this bevahiour actually saves me some lines of code so I adopted it :)
Gotta thank #camden_kid answer for the $watch tip, helped me figure it out in matter of seconds.
I am trying to make use of md-chips alongside other inputs in a form that are inside md-input-containers.
I have had to add my own css hacks to get the placeholder text of the input, plus padding and margin applied to get it to look as close enough to an input inside an md-input-container as best I can.
I know I can't get md-chips to work inside an md-input-container (I dont think its supported yet)
Here is how I have an input followed by an md-chips appearing:
<div layout="row">
<md-input-container flex>
<label translate>Name</label>
<input ng-model="ctrl.name">
</md-input-container>
<div class="chips-container" flex>
<md-chips ng-model="ctrl.fruitNames">
<md-chip-template>
<span><strong>{{$chip}}</strong></span>
</md-chip-template>
<input type="text" placeholder="Enter Something">
<button md-chip-remove class="chip">
<md-icon class="material-icons">clear</md-icon>
</button>
</md-chips>
</div>
</div>
Working Codepen
Has anyone faced a similar situation needing to get md-chips with inputs aligning correctly alongside other inputs in similar layouts?
Just looking for suitable solutions, I can't see any combination examples on the Angular Material input demos.
Thanks
I am initilizing a model with a Date function and binding it to an input which has a datepicker.
<label>Begin Date</label>
<div class='input-group date'>
<input ng-model="Main.BeginDate" class="form-control" onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false" is-open="BeginDate" ng-focus="BeginDate=true" ng-click="BeginDate=true" min-date="Main.MinDate" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
On first click, the datepicker shows the current date even though the actual date is different.
Then on clicking the input again, the datepicker-popup resets to the correct date.
I tried:
Formatting date using $filter
Custom new Date() function
Removing min-date attribute
How do I get the popup to show the date bound to the model?
I am using:
AngularJS v1.5.0
Bootstrap v3.3.6
Angular-ui-bootstrap Version: 0.13.4
First click ------>>>>>
Second click ----->>>>
I checked the situation and seems like the versions that you are using are somehow conflicting. If i use angular 1.4.9 or below and try your code all seems to work. Here is a plunker to show you that. But as soon as I use angular 1.5.0 or above I face the same issue as you. You could use angular 1.4.9 and angular-ui-bootstrap 0.13.4 or upgrade your angular ui bootstrap version.
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DateCtrl" style="padding:40px">
<label>Begin Date</label>
<div class='input-group date'>
<input ng-model="dt" class="form-control" onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false" is-open="BeginDateOpen" ng-focus="BeginDateOpen=true" ng-click="BeginDateOpen=true" min-date="Main.MinDate" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</body>
</html>
example.js
angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('DateCtrl', function ($scope) {
$scope.today = function(){
$scope.dt = new Date(1998,1,5)
}
$scope.today();
});
As mentioned by #Amit, the issue seems to be because of the incompatibilities between the versions of the libraries.
Based on the bug mentioned here, the solution to add atttribute init-date worked.
<input ng-model="dt" class="form-control"
onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false"
is-open="BeginDateOpen" ng-focus="BeginDateOpen=true" ng-click="BeginDateOpen=true"
min-date="Main.MinDate" required
init-date="dt"/>
Here is a plunker
I'm trying to use the date picker from angular material library. I'm able to make it work. But the problem is when I use the date picker inside a ng-repeat loop it doesn't seem to work. Even if I have only one list in my ng-repeat, it still doesn't work.
Not sure how to make this work.
div ng-controller="AppCtrl" style='padding: 40px;'>
<md-content ng-repeat="date in dates">
<h3>{{date}}</h3>
<form ng-submit="tellDate()">
<md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate"
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<md-button type="submit">Tell Date</md-button>
</form>
</md-content>
Here is the plnkr.
Try clicking on the Tell Date button and it gives you only the current date and not the date that you select. But it would just work fine without ng-repeat.
Any help is appreciated.
Thanks
I believe this is because the md-datepicker creates it's own scope - If you use the controller as syntax this will work for you:
HTML:
<div ng-controller="AppCtrl as ac" style='padding: 40px;'>
<md-content ng-repeat="date in dates">
<h3>{{date}}</h3>
<form ng-submit="tellDate()">
<md-datepicker ng-model="ac.myDate" md-placeholder="Enter date" md-min-date="minDate"
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<md-button type="submit">Tell Date</md-button>
</form>
</md-content>
Controller:
var vm = this;
$scope.tellDate = function() {
alert(vm.myDate);
}
I have updated the plnkr. In this scenario all of the date-pickers are bound to the same myDate variable though - not sure if this is the desired behaviour.
keithm is right. ng-repeat creates its own isolated scope. My suggestion would be to provide the particular date of each repeat to the "tellDate" function. So:
<div ng-controller="AppCtrl" style='padding: 40px;'>
<md-content ng-repeat="date in dates">
<h3>{{date}}</h3>
<form ng-submit="tellDate(myDate)">
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ...></md-datepicker>
<md-button type="submit">Tell Date</md-button>
</form>
</md-content>
And inside your controller:
$scope.tellDate = function(date) {
alert(date);
}