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!!
Related
I would like to disable the input under certain conditions.
Show the value, but not beeing able to modify it.
I tried to add an ng disable, or ng class, but it doesn't look to work for me.
<div ng-controller="SettingsController">
<md-input-container ng-class="{'md-block' : model.isDisable" ng-disabled="model.isDisabled">
<input ng-model="obj.name" aria-label="name" />
</md-input-container>
</div>
http://plnkr.co/edit/cReJQlhNOBzB7VihhRS5?p=preview
Move your ng-disabled to the input tag. It should work.
<div ng-controller="SettingsController">
<md-input-container ng-class="{'md-block' : model.isDisable" >
<input ng-model="obj.name" aria-label="name" ng-disabled="model.isDisabled" />
</md-input-container>
</div>
Also there is an out-of-place '{' in the ng-class that bothers me but the code still works so I didn't change it since I don't know if it is necessary.
i have simple angular application, contain date picker of material input.
<form name="xyz" ng-submit="xyz.$valid && submitMyForm()">
<md-input-container class="md-block">
<label>Available From</label>
<md-datepicker
ng-model="user.availableFrom"
ng-required="false"
md-open-on-focus
name="availableFrom"
id="availableFrom">
</md-datepicker>
</md-input-container>
<input type="Submit" value="Submit">
</form>
when i click on submit button then it shows red underline and forcing me to select any date, i want to submit blank input.
Thanks.
I know, it might be a little late, but maybe it's helping somebody else.
I assume your model variable is an empty string. I tried with tanmay's fiddle and changed it a little.
When you change
$scope.user.availableFrom = "";
to
$scope.user.availableFrom = null;
or completely remove this line, it will work.
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
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'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);
}