I'm trying to trigger a call to a function on change of the date in the uib datepicker however the ng-change attribute doesn't seem to be getting applied. I've tried using a watcher but since we're not using $scope in our controller I haven't been able to find a solution that works with that method. See code below:
<span class="input-group">
<span class="input-group-btn">
<button class="btn btn-default"
data-test="start-date-button"
ng-click="startDateIsOpen = !startDateIsOpen"
type="button">
<i class="fa fa-calendar"></i>
<span class="sr-only" translate>{{::'datePicker.openDatePicker'}}</span>
</button>
</span>
<input class="form-control"
is-open="startDateIsOpen"
name="startDate"
ng-attr-aria-describedby="{{conditionsController.showError(conditionsController.newConditionAttributes, 'startDate') ?
'new-condition-start-date-errors' : undefined}}"
ng-change="conditionsController.setMinStartDate(conditionsController.newCondition.editCondition.startDate)"
ng-model="conditionsController.newCondition.editCondition.startDate"
ng-required="conditionsController.newCondition.editCondition.startTime"
popup-placement="top-left"
type="text"
uib-datepicker-popup="{{dateFormat}}"/>
</span>
Any ideas on why this wouldn't be working?
Related
I am using angular with ng-bootstrap date component. Datepicker working well. But when I select today date shows as 2018-11-6.
I need change format like 2018-11-06 (leading zero). How can I change it?
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="mydate" [(ngModel)]="bankDetailDate" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary fa fa-calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>
I am trying to implement different dates using datepicker in my application. I have a checkbox box if user checks that check box then am adding the dates.
But it seems track by index is not working.
Here is my code-
<div class="form-group">
<label>6. Enter Onsite Details( Up to 4)</label> <br>
<div ng-repeat="selecting in selects track by $index" >
<div class="datePicker">
<button
bs-datepicker
class="btn btn-info" id="comm_cal_bttn"
name="date"
data-animation="am-flip-x"
data-autoclose="true"
ng-blur="getMinTime(index);"
ng-model="selects[index].commDate">
<i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Date
</button>
<p ng-show="selects[index].commDate">
{{selects[index].commDate}} <span class="text-muted"> {{selects[index].commDate}}</span> {{combinedTime.format('h:mm A')}}
</p>
</div>
<input type="checkbox" ng-click="addMore(keyAdd);" ng-model="keyAdd">
<label for="dateCheck">Add Additional</label>
</form>
above code on selecting a date am calling a function getMinTime(index) but index is showing undefined in my controller.
My controller-
$scope.selects = [{commDate : null}];
$scope.getMinTime = function(index){
// here index is showing undefined
}
I want to perform some operation based on the index value. Suppose I added 4 dates. What am I doing here here? Any suggestion?
You need to pass $index as a parameter not index
<!-- other code -->
<div class="form-group">
<label>6. Enter Onsite Details( Up to 4)</label>
<br>
<div ng-repeat="selecting in selects track by $index">
<div class="datePicker">
<button bs-datepicker class="btn btn-info" id="comm_cal_bttn" name="date" data-animation="am-flip-x" data-autoclose="true" ng-blur="getMinTime($index);" ng-model="selects[$index].commDate">
<i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Date
</button>
<p ng-show="selects[$index].commDate">
{{selects[$index].commDate}} <span class="text-muted"> {{selects[$index].commDate}}</span> {{combinedTime.format('h:mm A')}}
</p>
</div>
<input type="checkbox" ng-click="addMore(keyAdd);" ng-model="keyAdd">
<label for="dateCheck">Add Additional</label>
<!-- other code -->
I'm trying to select the input element but it doesn't seem to work.
HTML:
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" readonly class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">GPS</button>
</span>
</div>
</section>
jQuery:
$("#c1").find("input");
I'm trying to select this:
<input type="text" readonly class="form-control"/>
It works fine for me :
When I use this HTML...
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" readonly class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">GPS</button>
</span>
</div>
</section>
... and this JS...
var $InputElement = $("#c1").find("input");
console.log($InputElement);
... the console returns precisely the input element you're looking for.
Well, actually, it returns a jQuery object that contains the element you're looking for.
If you want the DOM element itself instead of a jQuery object, just do this :
var InputElement = $("#c1").find("input")[0];
console.log(InputElement);
You can try it yourself in this Fiddle.
I'm not able to bind time which I'm setting in the controller like this
$scope.info.startTime="12:10:03";
This is my time picker control in HTML
<span class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" tabindex="5"
ng-model="info.startTime" placeholder="hh:mm"
is-open="datepickerOpened1"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="openStartTime($event, 'time')">
<i class="glyphicon glyphicon-time"></i>
</button>
<div dropdown is-open="timepickerOpened1">
<span class="dropdown-menu" role="menu">
<timepicker ng-model="info.startTime" show-meridian="true"></timepicker>
</span>
</div>
</span>
</span>
Reference:Angular Bootstrap
You need to set date object in ng-model instead of string.
Change
$scope.info.startTime="12:10:03";
To
var d = new Date();
d.setHours(12);
d.setMinutes(10);
$scope.info.startTime=d;
I am using bootstrap date range picker https://github.com/dangrossman/bootstrap-daterangepicker.
When i select date range & then i click on "apply button" it will call "apply.daterangepicker" and return result.
#file.html
<div class="controls">
<div class="input-prepend input-group">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<input type="text" style="width: 400px" name="daterange" id="daterange" class="form-control" value="" class="span4"/>
<button id="stats" class="btn btn-small btn-sm btn-success">Show</button>
</div>
</div>
#file.js
$( document ).ready(function() {
$('#daterange').daterangepicker();
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
console.log(picker.startDate.format('YYYY-MM-DD'));
console.log(picker.endDate.format('YYYY-MM-DD'));
});
});
I would like to add my own custom event , i select date startDate & endDate, then i click "Show Button" instead of "Apply" button , it should display result.
Please find below screen shot
Thank you in advance :)