When I used Datetime picker for a single input, it worked fine.
But when I used ng-repeat and the ng-model values didn't show up inside the input box though ng-model values were saved properly.
Please check the following code:
<div class="input-group">
<span class="error-input"
ng-if="vm.editForm['employeeOnProjectStartDate'+$index].$error.required && vm.isSavedBefore">
This field is required
</span>
<input type="text" class="form-control" required
name="employeeOnProjectStartDate{{$index}}"
enable-time="false" datetime-picker="dd-MMM-yyyy" ng-model="employee.employeeOnProjectStartDate"
is-open="vm.datePickerOpenStatus.employeeOnProjectStartDate[$index]" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="vm.openCalendar('employeeOnProjectStartDate',$index)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
the solution is to add ng-value as well.
ng-value="employee.employeeOnProjectStartDate | date:'dd-MMM-yyyy'" solved the issue.
ng-change on uib-datepicker-popup is not working
Code in my html -
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" ng-focus="myFocus(123)" ng-change="mychange(987)"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
Code in my controller -
$scope.myChange = function(para1) {
console.log("myChange -- "+para1);
}
Expecting mychange function to trigger whenever user types in a different date or when he uses the picker to select a date.
Plunker link - https://plnkr.co/edit/e20qSViEAh9dZ6GEFnVh?p=preview
can you help to get the ng-model data
<input type="text" class="form-control" ng-model = "DateSchedule" required>
<button type="submit" ng-click="saveReservation()" class="btn btn-primary pull-right"><i class="glyphicon glyphicon-plus"></i> Schedule</button>
in the script i already place the controller and app
alert($scope.DateSchedule);
it return me undefined
thanks
Using Angularjs with spring(java)
I have following Angularjs bootstrap datepicker. it shows error when field is empty i am trying to inplace mindate validation which is today's date. if user type min-date should display error msg.
I tried placing check like 'form.offerStartDate.$error.mindate' but there is no property for mindate in error object. any help appreciated.
<p class="input-group">
<input type="text" name="offerStartDate" class="form-control" ng-required="true"
ng-class="{error: form.offerStartDate.$dirty && form.offerStartDate.$invalid}"
datepicker-popup="MM-dd-yyyy" ng-model="formData.offerStartDate"
is-open="startDateOpened" min-date="minDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
close-text="Close" /> <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,'startDate')">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div ng-show="form.offerStartDate.$dirty && form.offerStartDate.$invalid">
<small class="err-msg" ng-show="form.offerStartDate.$error.required">
Offer Start Date is required.
</small>
<small class="err-msg" ng-show="form.offerStartDate.$error.mindate">
Offer mindate is today's date.
</small>
</div>
Try to change min-date to min in input
It may be related with this issue:
https://github.com/angular-ui/bootstrap/issues/2189
I´m using the Bootstrap UI datepicker directive and I´m trying to have an datepicker button that opens the datepicker popup like in the original example but it does not work in a modal window.
See PLUNKER
What am I doing wrong?
Just change to: is-open="opened" to:
is-open="$parent.opened"
Fixed Demo Plunker
So relevant snippets of HTML will look like:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.MM.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="open()">
<i class="icon-calendar"></i></button> <b><- button not working</b>
</span>
</div>
I had to put a timeout to make it work:
function toggleStart($event) {
$event.preventDefault();
$event.stopPropagation();
$timeout(function () {
vm.isStartOpen = !vm.isStartOpen;
});
}
My template looks like this:
<input type="text" class="form-control"
datepicker-popup ng-model="vm.startDate"
is-open="vm.isStartOpen" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.toggleStart($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
datepicker directive creates its own scope which is not accessible outside.So to solve this you can use.
$parent.isopen
or use some Object property name to avoid prototype Inheritance, like
$scope.config.isopen=true;
ng-model="config.isopen" instead of ng-model="isopen".
You also work like that to initialize the date picker by icon.
HTML
<p class="input-group" ng-disabled="invoiceDateDisable">
<input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
JavaScript
$scope.open = function () {
$scope.opened = true;
};
You don't really need an open function:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.mm.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="$parent.opened=!$parent.opened">
<i class="icon-calendar"></i></button> <b><- button not working</b>
</span>
</div>