Develop Reference

Validate elements (jquery repeater)

I'm working on an e-commerce project that uses jquery repeater in the wizard. I need to loop through the elements of the input to make my validations. Here is my input form code.
<button data-repeater-create type="button" class="btn btn-dark btn-sm icon-btn ml-2 mb-2 float-right">
<i class="mdi mdi-plus"></i>
</button>
<div data-repeater-list="group">
<div data-repeater-item class="d-md-flex mb-2">
<div class="form-group mr-1">
<input type="text" class="mt-0 form-control form-control-sm" id="sku" name="sku" placeholder="sku">
</div>
</div>
</div>
It comes in the browers elements like this,
<input type="text" class="mt-0 form-control form-control-sm" id="sku" name="group[0][sku]" placeholder="sku">
you can see, its like an array. So I need to get all these elements and validated all. For other field validation I have use
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
can I use this for the those field?
Thanks in advance.

end date should not be greater then start date?

I want end date should not be greater then start date. Eg: start date is 24/4/2017 and end date is 23/4/2017 in such scenario it should not allow to search it should be disable the calendar date 23/4/2017. Only End date 24/4/2017 onwards it should be enable
//this are the code in controller
$scope.formats = ['dd/MM/yyyy', 'dd-mm-yyyy', 'yyyy/mm/dd', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.dateOptions = {
datepickerMode: "'year'",
startingDay: 1
};
$scope.max_date = new Date();
//HTML code
<div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 5px;">
<p class="input-group margin_zero calGroup">
From<input type="text" class="form-control" name="dob" uib- datepicker-popup="{{format}}" ng-model="ordersearch.startDateFrom"
is-open="opened" ng-click="open()" datepicker-options="dateOptions" close-text="Close" max-date="{{max_date}}" required/>
<span class="input-group-btn newCalIcon">
<button type="button" class="btn btn-default calendarIcon" ng-click="open()" >
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-6" style="padding-left: 5px;">
<p class="input-group margin_zero calGroup">
To<input type="text" class="form-control" name="dob" uib-datepicker-popup="{{format}}" ng-model="ordersearch.startDateTo" is-open="opened1" ng-click="open1()" datepicker-options="dateOptions" close-text="Close" max-date="{{max_date}}" min-date="{{min_date}}"/>
<span class="input-group-btn newCalIcon">
<button type="button" class="btn btn-default calendarIcon" ng-click="open1()" >
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
This is the code. I need to validate end date

You should make use of max-date and min-date directive provided by bootstrap datepicker.
<input type="text" readonly="" uib-datepicker-popup="dd-MM-yyyy" min-date="minEndDate" max-date="maxEndDate" ng-model=""placeholder="DD-MM-YYYY"></input>
You can bind any dates from your $scope to these fields and the calendar automatically restricts the date after and before them respectively. For ex:
$scope.minDate = new Date(); //this restrict any older date from today
$scope.maxDate = new Date ( someFutureDateObject);
EDIT: If you are not concerned about max-date you can just skip it. Its not mandatory to have a max-date.
Hope this helps

Uib datepicker ng-change not firing on date selection

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?

Angular Bootstrap Time Picker not Binding time

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;

Bootstrap date range picker custom event call

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 :)