I want to set value of query params with a datepicker, but when I try it the data won't display. I have include ng-model into my query params but doesn't work.
Here is my .js file, I want to pass dt and dt2 into query params in http get
app.controller("repcont", ['$scope','$http',function($scope,$http){
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
$scope.dt2 = new Date(year, month, day);
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyyMMdd'];
$scope.format = $scope.formats[0];
$scope.popup1 = {
opened: false
};
$scope.popup2 = {
opened: false
};
$scope.cari = function () {
$http.get('......./rpt?a='+$scope.dt+'b='+$scope.dt2).then(function(response){
$scope.report = response.data;
here is my .html file
<div class="col-md-2">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" />
<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>
<div class="col-md-2">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt2" is-open="popup2.opened"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<button type="button" class="btn btn-primary" ng-click="cari()"> Search </button>
</div>
</div>
<div class="jarak">
<table class="table table-bordered">
<thead>
<th>Tanggal</th>
<th>Jumlah Bayar</th>
<th>Jumlah Failed</th>
<th>Jumlah Closed</th>
<th>Jumlah Unflag</th>
</thead>
<tbody ng-repeat="item in report">
<tr>
<td>{{item.paydate}}</td>
<td>{{item.sumpaid}}</td>
<td>{{item.sumfail}}</td>
<td>{{item.sumclose}}</td>
<td>{{item.sumflag}}</td>
<p>Total Rows : {{report.length}}</p>
</tr>
</tbody>
</table>
Here is the result of my report:
Related
I want to implement Date Range Picker in angularjs by using angular-ui-datepickerbut I can't find the resource or good example for this so can anyone suggest me for date range picker or normal select From Date to select To date example also helpful for me so please suggest me!
I know this type of question I cant ask on this website but I m stuck so I ask
and i try many example but nothing work properly
Here is my code snippet that i try already:
Html Code:
<div class="row form-group" style="margin-left: 15px;" ng-if="table.custompicker">
<div class="crm-form-container">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon" uib-tooltip="From Date" uib-tooltip-trigger="focus" uib-tooltip-placement="top"><i class="fa fa-hand-o-right" aria-hidden="true"></i></span>
<input id="datepicker_update" class="form-control" type="text" uib-datepicker-popup="{{table.format}}"
ng-model="AvailableDate" ng-value="table.price_list.date_update"
is-open="table.dt_picker[3]" min-date="dpick.minDate" max-date="'2019-12-22'"
datepicker-options="table.dateOptions3" date-disabled="table.disabled(date, mode)"
close-text="Close" placeholder="From Date" name="select_date" ng-change="ChangeExpiryMinDate(AvailableDate)" datepicker-mode="'day'" required=""/>
<span class="input-group-btn">
<button class="btn btn-info" type="button" ng-click="table.open_dt_picker(3)">
<em class="fa fa-calendar"></em>
</button>
</span>
</div>
<span class="text-danger" ng-show="table.validateInput('select_date', 'required')">{{'revalidationmsg.REQUIREDMSG'|translate}}</span>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon" uib-tooltip="From Date" uib-tooltip-trigger="focus" uib-tooltip-placement="top"><i class="fa fa-hand-o-right" aria-hidden="true"></i></span>
<input id="datepicker_update" class="form-control" type="text" uib-datepicker-popup="{{table.format}}"
ng-model="ExpireDate" ng-value="table.price_list.date_update"
is-open="table.dt_picker[4]" min-date="dpick.minDate" max-date="'2019-12-22'"
datepicker-options="table.dateOptions4" date-disabled="table.disabled(date, mode)"
close-text="Close" placeholder="To Date" name="select_date" datepicker-mode="'day'" required=""/>
<span class="input-group-btn">
<button class="btn btn-info" type="button" ng-click="table.open_dt_picker(4)">
<em class="fa fa-calendar"></em>
</button>
</span>
</div>
<span class="text-danger" ng-show="table.validateInput('select_date', 'required')">{{'revalidationmsg.REQUIREDMSG'|translate}}</span>
</div>
<div class="col-sm-4">
<button class="btn btn-success btn-xs" type="button" value="SAVE" ng-click="table.generateReport(table.select)" uib-tooltip="" uib-tooltip-trigger="focus" uib-tooltip-placement="top">Generate Report</button>
<button class="btn btn-default btn-xs" type="button" ng-click="" uib-tooltip="" uib-tooltip-trigger="focus" uib-tooltip-placement="top">Cancel</button>
</div>
</div>
</div>
And Here is JS :
vm.dt_picker = [];
vm.dt = [];
vm.open_dt_picker = function (index) {
vm.dt_picker[index] = true;
};
$scope.dateOptions3 = {
formatYear: 'yy',
startingDay: 1,
showWeeks: false,
minMode: 'week',
//minDate: today,
//maxDate: new Date(2030, 5, 22)
};
$scope.dateOptions4 = {
formatYear: 'yy',
startingDay: 1,
showWeeks: false,
minMode: 'week',
//minDate: today,
//maxDate: new Date(2030, 5, 22)
};
vm.formats = ['dd-MMMM-yyyy', 'yyyy-MM-dd', 'yyyy', 'shortDate', 'MM-yyyy'];
vm.format = vm.formats[1];
vm.opencustompicker = function () {
vm.custompicker = true;
};
Your Html Code like
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label>Start Date</label>
<div class="input-group" >
<input ng-readonly="true" type="text" class="form-control " id="startdate" name="startdate" uib-datepicker-popup="MM/dd/yyyy"
ng-model="fromDate" is-open="startDateStatus"
show-button-bar="true" data-ng-click="toggleStartDate($event)"
placeholder="Select From Date"
datepicker-options="options"
close-text="Close" />
<span class="input-group-addon add-on link_cursor" data-ng-click="toggleStartDate($event)">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label>End Date</label>
<div class="input-group">
<input ng-readonly="true" type="text" class="form-control " id="enddate" name="enddate" uib-datepicker-popup="MM/dd/yyyy"
ng-model="toDate" is-open="endDateStatus"
show-button-bar="true" data-ng-click="toggleEndDate($event)"
placeholder="Select To Date"
datepicker-options="options2"
close-text="Close" />
<span class="input-group-addon add-on link_cursor" data-ng-click="toggleEndDate($event)">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
And Your Js Code like
//toggle start date popup
function toggleStartDate($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.startDateStatus = true;
}
//toggle end date popup
function toggleEndDate($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.endDateStatus = true;
}
I am creating a task manager but when i show the name of the user the administrator cannot modify the tasks from the users like an user:
The function to obtain the tasks its:
$scope.get = function(){
var user = $stateParams.userId;
if(user){
userService.detail({id: user}).then(function(response){
$scope.user = response;
}).catch(function(error){
notifications.error(error);
});
}
taskService.get(user).then(function(response){
$scope.tasks = response;
}).catch(function(error){
notifications.error(error);
});
};
The init function its:
$scope.init = function () {
$scope.detailCategory({id: $stateParams.categoryId});
$scope.showAddTask = false;
};
The html its:
<div class="all-tasks" ng-init="get()">
<div ng-show="user">
<p>Tasks from: <strong>{{user.username}}</strong></p>
</div>
<h3 class="margin-bottom-20" ng-show=(tasks|filter:{done:false}).length>Pending</h3>
<div ng-repeat="taskItem in tasks | filter:{done:false}" class="row row-margin button-show">
<div ng-hide="taskItem.is_editing">
<div class="inlineBlock">
<div ng-class="{'checkbox checkbox-circle': !user}">
<input type="checkbox" ng-hide="user" ng-change="edit(taskItem, true)" ng-model="taskItem.done">
<label class="lineBreak" ng-click="!user ? taskItem.is_editing = !taskItem.is_editing : false ">{{taskItem.name}}</label>
<span class="label label-success" ng-if="taskItem.in_progress">In progress</span>
<div class="label label-default">{{taskItem.category.name}}</div>
</div>
</div>
<div class="float-right margin-right-10">
<button type="button" class="btn btn-link btn-no-padding-top" ng-hide="user" ng-click="remove(taskItem, true)"><i class="fa fa-trash text-danger" aria-hidden="true"></i><span class="text-danger"> Delete</span> </button>
<div class="label label-primary" ng-hide="currentUser.is_superuser">Aggregate <span am-time-ago="taskItem.created_at"></span></div>
<div class="label label-primary" ng-hide="!currentUser.is_superuser">Agregada el <span>{{taskItem.created_at | amDateFormat:'D [de] MMMM [de] YYYY [a las] h:mm:ss a'}}</span></div>
<toggle-switch ng-model="taskItem.in_progress" ng-hide="user" class="switch-small switch-success show-hide" ng-change="edit(taskItem, true)" on-label="Si" off-label="No"><toggle-switch>
</div>
</div>
<div ng-if="taskItem.is_editing">
<form class="form" accept-charset="UTF-8" role="form" name="formEditTask{{taskItem.id}}" novalidate>
<div class="form-group">
<input type="text" class="form-control" ng-value="taskItem.name" focus-on-show="taskItem.is_editing" ng-model="taskItem.editName" name="task" placeholder="Task" ng-required="true" ng-blur="taskItem.is_editing = !taskItem.is_editing; taskItem.editName=''">
</div>
<button class="btn btn-primary btn-sm" ng-click="edit(taskItem, true)" ng-show="false">Edit</button>
</form>
</div>
</div>
When i modify the "if" all works but obviously the user doesn't show in the
Tasks from: {{user.username}}
The administrator only see the tasks http://i.imgur.com/GYKaP4y.png
I need this, like an user:
http://i.imgur.com/RPmIR2O.png
I have a simple code, 2 dates with uib-datepicker-popup:
<div>
<p class="input-group">
<input type="date" class="form-control" uib-datepicker-popup ng-model="adSearch.initDate" is-open="status1.opened" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'initDate')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div>
<p class="input-group">
<input type="date" class="form-control" uib-datepicker-popup ng-model="adSearch.endDate" is-open="status2.opened" close-text="Close" min-date="{{minEndDate}}" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'endDate')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
I need to dynamically set a minimum date in the second date from the first date.
I have tried different ways and no one of them work
$scope.open = function($event, date) {
if(date === 'initDate'){
$scope.status1.opened = true;
}else if(date === 'endDate'){
$scope.status2.opened = true;
}
};
$scope.status1 = {
opened: false
};
$scope.status2 = {
opened: false
};
$scope.adSearch.initDate = null;
$scope.minEndDate = $scope.adSearch.initDate;
$scope.$watch('adSearch.initDate', function(v){
console.log(v);
$scope.minEndDate = v;
});
This is what i have in my controller at this moment, it is something I have found that works for datepicker from ui-bootstrap, but does not work for uib-datepicker.
<html ng-app="ui.bootstrap.demo">
<head>
<link rel="stylesheet" href="bootstrap.css">
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
<script src="ui-bootstrap-tpls-1.1.1.js"></script>
<script>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
$scope.minDate = new Date();
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.open2 = function() {
$scope.minDate = $scope.dt;
$scope.popup2.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.format = 'dd-MMMM-yyyy';
$scope.popup1 = {
opened: false
};
$scope.popup2 = {
opened: false
};
});
</script>
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<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" show-button-bar="false" />
<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>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" show-button-bar="false" min-date="minDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</body>
</html>
check this. the minDate var in $scope is set when open2() fn is called(i.e when the end date popup is popped. Use ng-Click()
This is an old question but some people might still find this useful for the newer versions. I am currently using angular-ui-bootstrap, version 2.2.0.
Arrive Date
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{formatDate}}" datepicker-options="arriveDateOptions"
ng-model="arriveDatePicked"
is-open="arriveDateCalendarOpened"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openArriveDateCalendar()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
Departure Date
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{formatDate}}" datepicker-options="departureDateOptions"
ng-model="departureDatePicked"
is-open="departureDateCalendarOpened"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDepartureDateCalendar()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
My controller looks like this:
$scope.formatDate = 'dd-MMMM-yyyy';
$scope.arriveDateCalendarOpened = false;
$scope.departureDateCalendarOpened = false;
var today = new Date();
var minDepartureDate = new Date();
minDepartureDate.setDate(today.getDate() + 7);
$scope.arriveDatePicked = today;
$scope.departureDatePicked = minDepartureDate;
$scope.arriveDateOptions = {
maxDate: new Date(2020, 5, 22),
minDate: today
};
$scope.departureDateOptions = {
maxDate: new Date(2020, 5, 22),
minDate: today
};
I am not sure about the old versions of ui-boostrap and how they used to work, but in this version we can set the minimum and the maximum date in the datepicker-options attribute.
In order to update the departureDate on the fly when the arriveDate changes, we need to force that when we open the departureDate calendar. (in my case, when the openDepartureDateCalendar() function is called)
$scope.openArriveDateCalendar = function () {
$scope.arriveDateCalendarOpened = true;
};
$scope.openDepartureDateCalendar = function () {
$scope.departureDateOptions.minDate = $scope.arriveDatePicked;
$scope.departureDateCalendarOpened = true;
};
you need to update your ui bootstrap version to atleast release 0.14.0
here
is the migration info from old version to new.
uib-datepicker has a big problem when you want to update the model from another date, I changed my mind and tried something different that works for angular too (using jquery-ui datepicker).
this are the 2 directives that i used and worked well:
.directive('startDateCalendar', [
function() {
return function(scope, element) {
scope.$watch('filterDate.endDate', (function(newValue) {
element.datepicker('option', 'maxDate', newValue);
}), true);
return element.datepicker({
dateFormat: 'dd-mm-yy',
numberOfMonths: 1,
maxDate: scope.filterDate.endDate,
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(date) {
scope.filterDate.initDate = date;
var dateHelper = date.split('-');
scope.adSearch.initDate = new Date(dateHelper[2]+'-'+dateHelper[1]+'-'+dateHelper[0]);
scope.dateSearch();
scope.$apply();
}
});
};
}])
.directive('endDateCalendar', [
function() {
return function(scope, element) {
scope.$watch('filterDate.initDate', (function(newValue) {
element.datepicker('option', 'minDate', newValue);
}), true);
return element.datepicker({
dateFormat: 'dd-mm-yy',
numberOfMonths: 1,
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
minDate: scope.filterDate.initDate,
onSelect: function(date) {
scope.filterDate.endDate = date;
var dateHelper = date.split('-');
scope.adSearch.endDate = new Date(dateHelper[2]+'-'+dateHelper[1]+'-'+dateHelper[0]);
scope.dateSearch();
return scope.$apply();
}
});
};
}])
this is the html:
<input type="text" start-date-calendar="" ng-model="filterDate.initDate" placeholder="Start Date" class="form-control" readonly="readonly" />
<input type="text" end-date-calendar="" ng-model="filterDate.endDate" placeholder="End Date" class="form-control" readonly="readonly"/>
I was having a similar issues setting the minDate in version 2.5.0.
I tried all the answers here and none of them worked for me, I was able to get the minDate to update dynamically just by casting it to a new Date().
HTML:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label id="lbl"></label>
<p class="input-group" style="max-width:280px;">
<input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="DepartureDate" is-open="departureDate" datepicker-options="departureDateOptions" close-text="Close" alt-input-formats="altInputFormats" readonly/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="departureDate = !departureDate"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label id="lbl"></label>
<p class="input-group" style="max-width:280px;">
<input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="ArrivalDate" is-open="arrivalDate" datepicker-options="arrivalDateOptions" close-text="Close" alt-input-formats="altInputFormats" readonly/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="ArrivalDateClick()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
Code:
$scope.departureDateOptions = {
minDate: new Date()
};
$scope.arrivalDateOptions = {
minDate: null
};
$scope.ArrivalDateClick = function () {
$scope.ArrivalDate = $scope.DepartureDate;
$scope.arrivalDateOptions.minDate = new Date($scope.DepartureDate);
$scope.arrivalDate = !$scope.arrivalDate;
};
$scope.ArrivalDateClick();
With uibootstrap's datepicker,I have a single page with two controls, one is starttime and one is endtime.
I want the following; when I set starttime ,the endtime's min-date is start time. But when I click the endtime I would like the fielded set to "" the.first time.
<p class="input-group">
<input class="form-control" datepicker-popup ng-model="view.starttime" is-open="dateSet.opened.startTime" min-date="'2015-05-02'" max-date="'2015-06-22'" datepicker-options="dateSet.dateOptions" date-disabled="dateSet.disabled(date, mode)" ng-required="true" show-weeks="flase" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="dateSet.openFn($event,'startTime')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group">
<input class="form-control" datepicker-popup ng-model="view.endtime" is-open="dateSet.opened.endTime" min-date="view.starttime" max-date="'2015-06-22'" datepicker-options="dateSet.dateOptions" date-disabled="dateSet.dateSet.disabled(date, mode)" ng-required="true" show-weeks="flase"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="dateSet.openFn($event,'endTime')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
This works for me (forked from the bootstrap demo)
$scope.updateEndDate = true;
$scope.$watch('startDate', function(val) {
if($scope.updateEndDate) $scope.endDate = val;
});
$scope.click = function() {
if ($scope.updateEndDate)
{
$scope.updateEndDate = false;
$scope.endDate = "";
}
};
HTML
{{updateEndDate}}
<div class="col-md-6">
<p class="input-group">
<input name="startDate" type="text" class="form-control"
ng-model="startDate"
is-open="opened"
ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input
ng-focus="click()"
name="endDate" type="text" class="form-control"
ng-model="endDate"
is-open="opened"
ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
Plunk http://plnkr.co/edit/HfihvKanQsERr4wFq9VE?p=preview
If I understood correctly, you want to set the min-date on the 'end date' picker to be the value of the 'start date' picker, BUT you want to initialize the end date picker to be null.
To do this, you need to initialize the end date to a null value. In your case, that would be $scope.view = {endtime: ''};. Since you didn't provide your controller code or a demo, I just created a simple demo below that matches what I think you want to accomplish.
var app = angular.module('daterange.demo', ['ui.bootstrap'])
.config(function(datepickerConfig, datepickerPopupConfig) {
datepickerConfig.formatYear = 'yy';
datepickerConfig.startingDay = 1;
datepickerConfig.showWeeks = false;
datepickerPopupConfig.datepickerPopup = "shortDate";
datepickerPopupConfig.closeText = "Close";
});
app.controller('DatepickerPopupDemoCtrl', function($scope) {
$scope.startdt = new Date();
$scope.enddt = '';
$scope.opened = {
startdt: false,
enddt: false
};
$scope.open = function($event, picker) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened[picker] = true;
};
$scope.$watch('startdt', function(newval) {
if ($scope.enddt !== '' && newval > $scope.enddt) {
$scope.enddt = newval;
}
});
$scope.setRangeClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(12, 0, 0, 0);
var startDay = new Date($scope.startdt).setHours(12, 0, 0, 0);
var endDay = new Date($scope.enddt).setHours(12, 0, 0, 0);
if (dayToCheck >= startDay && dayToCheck < endDay) {
return 'range';
}
}
return '';
};
});
#import "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css";
.btn-default[disabled], .btn-default.disabled {
background-color: #999;
}
.range>.btn-default {
background-color: #5bb75b;
}
.range button span {
color: #fff;
font-weight: bold;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<div ng-app="daterange.demo">
<div class="container" ng-controller="DatepickerPopupDemoCtrl">
<div class="row">
<div class="col-xs-12">
<h2>Popup Date Range Picker Demo</h2>
<pre>Date Range: {{startdt | date:'fullDate' }} - {{enddt | date:'fullDate' }}</pre>
</div>
<div class="col-xs-6">
<label for="startdate">Start Date</label>
<p class="input-group">
<input type="text" class="form-control" id="startdate" datepicker-popup ng-model="startdt" is-open="opened.startdt" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'startdt')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-xs-6">
<label for="enddate">End Date</label>
<p class="input-group">
<input type="text" class="form-control" id="enddate" datepicker-popup ng-model="enddt" is-open="opened.enddt" min-date="startdt" custom-class="setRangeClass(date, mode)" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'enddt')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</div>
In my demo above, I also added a $watch function that updates the end date picker when the start date picker changes. If the start date is greater than the end date, the end date is reset. Since you don't want the end date to change when the initial digest cycles are run on the page, you have to check for an empty value for the end date.
Additionally, I'm using the new custom-class attribute to show the date range on the end calendar. If you'd like to use this feature, make sure that you're using UI Bootstrap 0.13.0+.
I have two inputs that are dynamically populating a table with data per the users needs. The table rows are submitted to the controller, this is working fine. the problem is the models i need to bind them to are subjPoint.x and subjPoint.y
The angular expressions in the table are
point.subjPointX and
point.subjPointY
I could not get it to work with the .x
How do I set this up so the controller does not see subjPoint as a child property?
plunker
//Add New POD Row
$scope.pointArray = [];
$scope.addRow = function () {
$scope.pointArray.push({
'subjPointX': $scope.subjPointX,
'subjPointY': $scope.subjPointY,
});
$scope.subjPointX = '';
$scope.subjPointY = '';
};
$scope.point = {};
$scope.addSubjectPoint = function () {
var point = $scope.point;
var index = 0;
$scope.pointArray.forEach(function (point) {
console.log('pointArray #' + (index++) + ': ' + JSON.stringify(point));
});
var data = JSON.stringify($scope.pointArray);
};
View
<form ng-submit="addSubjectPoint(point)" enctype="multipart/form-data">
<ng-form role="form" ng-submit="addRow()">
<input id="subjPointx" type="number" placeholder="Square Feet" ng-model="subjPointX" ng-pattern=" /^\d+$/" style="height: 34px;" step="500" />
<input id="subjPointy" type="number" placeholder="Cost" ng-model="subjPointY" ng-pattern=" /^\d+$/" style="height: 34px;" step="10000" />
<input type="button" class="btn btn-primary btn-sm" ng-click="addRow()" value=" Add">
</ng-form>
<table class="table">
<tbody>
<tr ng-repeat="point in pointArray">
<td>{{point.subjPointX}}</td>
<td>{{point.subjPointY}}</td>
<td style="width:20px"><input type="button" value="X" class="btn btn-primary btn-sm" ng-click="removeRow(point.QBRFQLINESUPPLIERPARTNUMBER)" /></td>
</tr>
</tbody>
</table>
Update
pointArray #0: {"x":500,"y":10000,"$$hashKey":"004"}
example.js:29 pointArray #1: {"x":1000,"y":20000,"$$hashKey":"006"}
example.js:29 pointArray #2: {"x":1500,"y":40000,"$$hashKey":"008"}
Something like this would work? plunker
controller
angular.module('demo', []);
angular.module('demo').controller('DemoCtrl', function ($scope) {
//Add New POD Row
$scope.pointArray = [];
$scope.addRow = function () {
$scope.pointArray.push($scope.subjPoint);
$scope.subjPoint = {};
};
//Remove Row
$scope.removeRow = function (x) {
var index = $scope.pointArray.indexOf(x);
if (index === -1) {
alert("Something gone wrong");
}
$scope.pointArray.splice(index, 1);
$scope.apply();
};
});
template
<form ng-submit="addSubjectPoint(point)" enctype="multipart/form-data">
<ng-form role="form" ng-submit="addRow()">
<input id="subjPointx" type="number" placeholder="Square Feet" ng-model="subjPoint.x" ng-pattern=" /^\d+$/" style="height: 34px;" step="500" />
<input id="subjPointy" type="number" placeholder="Cost" ng-model="subjPoint.y" ng-pattern=" /^\d+$/" style="height: 34px;" step="10000" />
<input type="button" class="btn btn-primary btn-sm" ng-click="addRow()" value=" Add">
</ng-form>
<table class="table">
<tbody>
<tr ng-repeat="point in pointArray">
<td>{{point.x}}</td>
<td>{{point.y}}</td>
<td style="width:20px">
<input type="button" value="X" class="btn btn-primary btn-sm" ng-click="removeRow(point)" />
</td>
</tr>
</tbody>
</table>
<input type="submit" class="btn btn-primary btn-sm" value=" Submit">
</form>