i have the following HTML element and the calendar its supposed to open when you focus on it but it just doesn't happen, any suggestions?
<md-datepicker name="firstDate" ng-model="AddQuote.current.hotel.firstDate" ng-required="true" md-open-on-focus></md-datepicker>
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 would like to enable save button only when form validation returns no error. Everything works fine until I put date input field, and I have no idea what is bothering him.
This is an example of such field:
<div ng-class="{ 'fg-toggled': openCalendar.ppDateClosing == true }">
<input name="dateClosing"
ng-click="openDatePicker($event, 'ppDateClosing')"
ng-model="pp.dateClosing"
ng-readonly="true"
placeholder="{{pp.dateClosing}}"
is-open="openCalendar.ppDateClosing"
data-date-format="dd.MM.yyyy"
datepicker-popup="dd.MM.yyyy"
datepicker-options="dateOptions"
show-weeks="false"
type="text">
</div>
If I remove the datepicker-popup="dd.MM.yyyy" line, then validation works ok, but date-picker doesn't.
Did anybody have similar problem or has an idea how to solve this?
(I'm using angular boostrap)
I am having below code in angular view page to apply date range.
<input type="text"
ui-options="{format: 'DD-MMM-YYYY'}"
min-date="02/10/86"
max-date="today"
ui-jp="datetimepicker"
class="form-control">
and it is not working.
Thanks for your time.
I'm currently working on a angular datepicker. To do so, I use the UIBootstrap datepicker. But I'm facing a problem. I need to use the init-date attribute :
init-date : The initial date view when no model value is specified.
The attribute seems to be available only on the datepicker directive. The fact is that I sue the popup datepicker and not the datepicker himself. There is the html for the datepicker-popup
Html
<input type="text" class="form-control " datepicker-popup="dd/MM/yyyy" ng-model="date" is-open="opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
I want to know If there is something like the init-date for the popup-datepicker. I had thougth about the datepicker-options but I wasn't capable of doing something who works with this idea. Nevertheless, is it possible to make it works with this datepicker-options ?
Well It was definitely on the datepicker-options but it doesn't works because of a problem due to a bug in angular-ui-bootstrap 0.12.1.0. This problem is solve in the latest version of angular-ui-bootstrap (0.13.0)
I'm trying to create a directive for the datepicker, but the popup is not working (neither clicking in the textfield or the button)
Plunker: http://plnkr.co/edit/hUxQASblscbhFZFvWDyN
p.d: the idea is remove all datepicker code from the controller (cause the datepicker will be used in many controllers), so please don't suggest move the open and close function to the page controller.
I'm not sure this will get you all the way to your objective, but I think the hurdle you are facing is that you forgot to import ui.bootstrap when creating your 'foo' app.
http://plnkr.co/edit/ZGl0VuJjVF1nliMidaL6
Ensure you have the is-open attribute defined in the markup.
<input type="text" class="form-control" datepicker-popup="date.format" ng-model="date.selectedDate" max-date="date.maxDate" datepicker-options="date.dateOptions" date-disabled="date.disabled(date, mode)" ng-required="true" close-text="Close" show-weeks="false" is-open="date.opened" ng-focus="date.opened=true" />