angularjs - how to work with 2 datepicker widgets -
i have 2 datepickers, 1 representing start date , end date.
using angular-ui.
how make each 1 function independently.
edit: , how make 2 datepickers appear on same line
here plunkr demo
html code
<body ng-controller="datepickerdemoctrl"> <br><br><br> <div class="col-md-6"> <p class="input-group"> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt1" is-open="opened" min-date="mindate" max-date="'2015-06-22'" datepicker-options="dateoptions" date-disabled="disabled(date, mode)" 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 type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt1" is-open="opened" min-date="mindate" max-date="'2015-06-22'" datepicker-options="dateoptions" date-disabled="disabled(date, mode)" 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> <script type="text/javascript" src="bootstrap-select.js"></script> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
thanks in advance
demo: http://plnkr.co/edit/rgjndx1sxk9u8wcxsmfs?p=preview
js:
angular.module("myapp", ['nganimate', 'ui.bootstrap']) .controller('datepickerdemoctrl', function($scope) { $scope.today = function() { $scope.dt1 = new date(); $scope.dt2 = new date(); }; $scope.today(); $scope.clear = function() { $scope.dt1 = null; $scope.dt2 = null; }; // disable weekend selection $scope.disabled = function(date, mode) { return (mode === 'day' && (date.getday() === 0 || date.getday() === 6)); }; $scope.togglemin = function() { $scope.mindate = $scope.mindate ? null : new date(); }; $scope.togglemin(); $scope.open1 = function($event) { $event.preventdefault(); $event.stoppropagation(); $scope.opened1 = true; }; $scope.open2 = function($event) { $event.preventdefault(); $event.stoppropagation(); $scope.opened2 = true; }; $scope.dateoptions = { formatyear: 'yy', startingday: 1 }; $scope.formats = ['dd-mmmm-yyyy', 'yyyy/mm/dd', 'dd.mm.yyyy', 'shortdate']; $scope.format = $scope.formats[0]; var tomorrow = new date(); tomorrow.setdate(tomorrow.getdate() + 1); var aftertomorrow = new date(); aftertomorrow.setdate(tomorrow.getdate() + 2); $scope.events = [{ date: tomorrow, status: 'full' }, { date: aftertomorrow, status: 'partially' }]; $scope.getdayclass = function(date, mode) { if (mode === 'day') { var daytocheck = new date(date).sethours(0, 0, 0, 0); (var = 0; < $scope.events.length; i++) { var currentday = new date($scope.events[i].date).sethours(0, 0, 0, 0); if (daytocheck === currentday) { return $scope.events[i].status; } } } return ''; }; }) .controller("mainctrl", function($scope) { $scope.courses = [{ "name": "java", "level": "i" }, { "name": "python", "level": "i" }, { "name": "nodejs", "level": "a" }]; $scope.caller = function() { console.log($scope.inputvalue); }; }) .filter('inarray', function($filter) { return function(list, arrayfilter, element) { return $filter("filter")(list, function(listitem) { return !arrayfilter || arrayfilter.length == 0 || arrayfilter.indexof(listitem[element]) != -1; }); }; }); html:
<div class="col-md-6"> <p class="input-group"> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt1" is-open="opened1" min-date="mindate" max-date="'2015-06-22'" datepicker-options="dateoptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open1($event)"><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" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened2" min-date="mindate" max-date="'2015-06-22'" datepicker-options="dateoptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> i not sure if way did in way. may can correct me on this.
Comments
Post a Comment