I am busy trying to enable 2 days only in the date picker but I am struggling to get it right. I am seeking to enable the 1st of the current month and the 1st of the next month only, everything else should be disabled.
Following is the code I am busy playing around with:
angular.module('plunker', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope, $timeout) {
$scope.dates = ["2017/08/01","2017/09/01"];
$scope.date = new Date();
$scope.minStartDate = 0; //fixed date
$scope.maxStartDate = Date.parse($scope.dates[0]); //init value
$scope.minEndDate = Date.parse($scope.dates[0]); //init value
$scope.maxEndDate = Date.parse($scope.dates[1]); //fixed date
$scope.openStart = function() {
$timeout(function() {
$scope.startOpened = true;
});
};
$scope.openEnd = function() {
$timeout(function() {
$scope.endOpened = true;
});
};
$scope.dateOptions = {
'year-format': "'yyyy'",
'starting-day': 1
};
};
--------------------HTML------------------
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<div class="form-horizontal">
<h3>Date</h3>
<p>
<input type="text" datepicker-popup="{{format}}" ng-model="date" is-open="endOpened" min="minEndDate" max="maxEndDate" datepicker-options="dateOptions" close-text="Close" />
<button class="btn" ng-click="openEnd()"><i class="icon-calendar"></i></button>
</p>
</div>
</div>
</body>
</html>
Related
i would like to create a popupDatePicker starting from an array of dates(retrieved from a json response) but looking for it on internet i don't find any simple example that respect my question. In my code it doesn't work...
This is my example.js:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
$scope.myDisabledDates = ['2017-09-22T09:13:00.000Z','2017-09-23T09:13:00.000Z']
$scope.options = {
dateDisabled: disabled,
startingDay: 1
};
$scope.formats = ['yyyy-MM-ddTHH:mm:ssZ', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
/* $scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.popup1 = {
opened: false
};*/
function disabled(data) {
var date = data.date.toISOString().slice(0, 10),
mode = data.mode;
return mode === 'day' && $scope.myDisabledDates.indexOf(date) > -1;
}
});
And index.html:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<div style="display:inline-block; min-height:290px;">
<div uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="options"></div>
</div>
</div>
</body>
</html>
The issue with your current code is that you are evaluating a 10 character string against a 24 character string. To fix this, change the return from disabled() to be:
return mode === 'day' && $scope.myDisabledDates.some(x => x.slice(0, 10) === date);
Or in browsers that don't support arrow functions (IE):
return mode === 'day' && $scope.myDisabledDates.some(function(x) {
return x.slice(0, 10) === date;
});
I have implemented a pagination and a filter based on a criteria function: JSBin:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
</head>
<body>
<section class="main" ng-controller="contentCtrl">
<div style="float: right; margin-right: 200px">
has more than 3 letters <input type="checkbox" ng-model="criteria.number" ng-true-value="3" ng-false-value="null" /><br>
</div>
<h3>Existing friends</h3>
<div ng-repeat="friend in filteredFriends | filter: criteriaMatch(criteria)">
{{friend.name}}
</div>
<pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage"></pagination>
</section>
</body>
</html>
JavaScript:
var app = angular.module('plunker', ['ui.bootstrap']);
app.factory('friendsFactory', function() {
var o = {
friends: [ {"name":"Jack"}, {"name":"Tim"}, {"name":"Stuart"},
{"name":"Tom"}, {"name":"Frank"}, {"name":"Nicholas"},
{"name":"Jesse"}, {"name":"Amber"}, {"name":"Tom"},
{"name":"Jerry"}, {"name":"Richard"}, {"name":"Mike"},
{"name":"Michael"}, {"name":"Jim"}, {"name":"Louis"}]
};
return o;
});
app.controller('contentCtrl', function ($scope, friendsFactory) {
$scope.friends = friendsFactory.friends;
$scope.totalItems = $scope.friends.length;
$scope.itemsPerPage = 5
$scope.currentPage = 1;
function refresh() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
var end = begin + $scope.itemsPerPage;
$scope.filteredFriends = friendsFactory.friends.slice(begin, end);
$scope.totalItems = $scope.friends.length;
}
$scope.criteria = { number: "null" };
$scope.criteriaMatch = function (cri) {
return function (friend) {
return ((cri.number === "null") || (friend.name.length > cri.number));
};
};
$scope.$watch('currentPage', refresh);
});
The problem is that, after selecting the filter, it shows the names whose length is greater than 3 page by page. What I want is that, it should recalculate the number of pages, and keep showing 5 good names per page.
Does anyone know how to modify the program to realise this?
Additionally, if I replace "null" by null, it will not work after selecting and deselecting the filter. Does anyone know why?
PS: it is very different from this thread; not a duplication...
Here is a solution: JSBin:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta name="description" content="filter and pagination 1">
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
</head>
<body>
<section class="main" ng-controller="contentCtrl">
<div style="float: right; margin-right: 200px">
has more than 3 letters <input type="checkbox" ng-model="criteria.number" ng-true-value="3" ng-false-value="0" /><br>
</div>
<h3>Existing friends</h3>
<div ng-repeat="friend in filteredFriends | start: (currentPage - 1) * itemsPerPage | limitTo: itemsPerPage">
{{friend.name}}
</div>
<pagination total-items="filteredFriends.length" items-per-page="itemsPerPage" ng-model="currentPage"></pagination>
</section>
</body>
</html>
JavaScript:
var app = angular.module('plunker', ['ui.bootstrap']);
app.factory('friendsFactory', function() {
var o = {
friends: [ {"name":"Jack"}, {"name":"Tim"}, {"name":"Stuart"},
{"name":"Tom"}, {"name":"Frank"}, {"name":"Nicholas"},
{"name":"Jesse"}, {"name":"Amber"}, {"name":"Tom"},
{"name":"Jerry"}, {"name":"Richard"}, {"name":"Mike"},
{"name":"Michael"}, {"name":"Jim"}, {"name":"Louis"}]
};
return o;
});
app.controller('contentCtrl', function ($scope, friendsFactory) {
$scope.friends = friendsFactory.friends;
$scope.criteria = { number: 0 }
$scope.filteredFriends = $scope.friends;
$scope.itemsPerPage = 5
$scope.currentPage = 1;
function refresh() {
$scope.filteredFriends = $scope.friends.filter(function(item){
return item.name.length > $scope.criteria.number;
})
};
$scope.$watch('currentPage', refresh);
$scope.$watch('criteria.number', refresh);
});
app.filter('start', function () {
return function (input, start) {
if (!input || !input.length) { return; }
return input.slice(start);
};
});
I have the following in my view:
<label for="txtFrom">Pickup Location</label>
<input type="text" id="pickup" placeholder="Address, aiport, train station, hotel..." ng-model="pickup">
<label for="txtDestination">Destination</label>
<input type="text" id="destination" placeholder="Address, aiport, train station, hotel..." ng-model="destination">
<input class="btn btn-success" name="calcPrice" id="calcPrice" type="submit" value="Calculate Price" ng-click="calcPrice()">
I am using google maps api for places to autocomplete the input boxes, so if a user starts typing "Lo", he will get a list of places that starts with "Lo" and for example he chooses London.
The problem is in my controller I am not getting the whole autocompleted value. I am only getting what the user initially entered, in this case "Lo".
Here is my controller:
app.controller('BookingsCtrl', function($scope, BookingsService) {
$scope.pickup = "";
$scope.destination = "";
$scope.syncNotification = "";
$scope.calcPrice = function() {
console.log($scope.pickup);
BookingsService.save({
pickup: $scope.pickup,
destination: $scope.destination
}, function(response) {
console.log(response.message);
});
};
});
EDIT:
Here is also a snippet of the JS:
var pickup = document.getElementById('pickup');
var options = {
componentRestrictions: {
country: 'ee'
}
};
var autocompletePickup = new google.maps.places.Autocomplete(pickup, options);
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
pickup.innerHtml = place.formatted_address;
var lat = place.geometry.location.lat();
var long = place.geometry.location.lng();
});
EDIT 2 : Added service
app.service('BookingsService', function ($resource) {
return $resource('http://localhost:3000/', {});
});
EDIT 3 : Template
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDt1Y30OssBToIzSCOr3g5IkN3c0D75XVE&libraries=places"
></script>
</head>
<body ng-app='strelsau_client'>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<img class="masthead-brand" src="../assets/img/logo.png">
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div ng-view>
</div>
</div>
</div>
</div>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="components/angular/angular.min.js"></script>
<script src="components/angular-route/angular-route.min.js"></script>
<script src="components/angular-resource/angular-resource.min.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers/bookings_controllers.js"></script>
<script src="js/services/bookings_service.js"></script>
</body>
</html>
In fact pickup input element is not getting updated once the place is resolved.
The problem with this function:
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
pickup.innerHtml = place.formatted_address; //invalid
//...
});
For setting input field value should be used value property.
Anyway, given the example, try to replace it with:
(function (scope) {
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
scope.pickup = place.formatted_address;
});
})($scope);
Example
angular.module('myApp', [])
.controller('BookingsCtrl', function ($scope) {
$scope.pickup = "";
$scope.destination = "";
$scope.syncNotification = "";
var pickup = document.getElementById('pickup');
var options = {
componentRestrictions: {
country: 'ee'
}
};
var autocompletePickup = new google.maps.places.Autocomplete(pickup, options);
(function (scope) {
google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
var place = autocompletePickup.getPlace();
scope.pickup = place.formatted_address;
});
})($scope);
$scope.calcPrice = function () {
console.log($scope.pickup);
alert($scope.pickup);
/*BookingsService.save({
pickup: $scope.pickup,
destination: $scope.destination
}, function (response) {
console.log(response.message);
});*/
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div ng-app="myApp" ng-controller="BookingsCtrl" ng-cloak>
<label for="txtFrom">Pickup Location</label>
<input type="text" id="pickup" placeholder="Address, aiport, train station, hotel..." ng-model="pickup">
<label for="txtDestination">Destination</label>
<input type="text" id="destination" placeholder="Address, aiport, train station, hotel..." ng-model="destination">
<input class="btn btn-success" name="calcPrice" id="calcPrice" type="submit" value="Calculate Price" ng-click="calcPrice()">
</div>
Using AngularJs, I want to dynamically disable particular date of a Datepicker. Here what I have did.
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $q) {
$scope.date1 = new Date();
$scope.date2 = new Date();
$scope.date2.setDate($scope.date2.getDate() - 1);
var currentDay = new Date();
$scope.isDateDisabled = function(date, mode) {
/*console.log("date=="+date.getTime());
console.log("currentdate"+$scope.date2.getTime());*/
if (date.getDate() === $scope.date2.getDate()) {
return true;
} else {
return false;
}
};
});
/* Put your css in here */
.padTop {
padding-top: 20px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container padTop">
<div>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="date1" min-date="minDate" show-weeks="true" date-disabled="isDateDisabled(date,mode)" class="well well-sm"></datepicker>
</div>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="date2" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>
</div>
</div>
<p class="padTop">date1:</p>
<pre>
{{ date1 | date : 'dd/MM/yyyy' }}
{{ date2 | date : 'dd/MM/yyyy' }}
</pre>
</div>
</body>
</html>
It was disabled the date in 1st datepicker, which was selected in second datepicker. But If I change the date in 2nd datepicker It wont be reflected(i.e It wont be disabled in 1st datepicker). Anyway to handle this case?
AFAIK there is no clean way to do this, but the datepicker refreshes when you change your minDate attribute. So if you add this in your controller, it will work...
$scope.$watch("date2", function (newValue, oldValue) {
$scope.minDate= new Date();
$timeout(function () {
$scope.minDate = null;
}, 0);
});
I am not able to put the data into ng-model in view from an object in controller.
VIEW1 :
<input type="text" class="user-input" name="profile.firstname" ng-model="profile.firstname" ng-minlength="2" required pattern=".{2,}" placeholder="E.g. Anvika" title="Please enter atleast 2 characters">
When I click a button in VIEW2, it fires a function (say function 'test').
VIEW2
<input type="submit" ng-click="register.test()" ui-sref="doctorRegister" value="Profile">
CONTROLLER:
var app = angular.module('app');
app.controller('registerController', ['$scope', 'tempDataStorageService', function ($scope, tempDataStorageService) {
var register = this;
register.doctor = {};
register.test = function () {
register.refreshProfile = tempDataStorageService.get(register.doctor.profile);
//console.log(register.refreshProfile);
var a = register.refreshProfile.firstname;
console.log(a);
}
}
TempDataStorageService:
var app = angular.module('app');
app.factory('tempDataStorageService', function() {
var savedData = {};
function set(data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
});
EDIT: I have tried to show the declaration of the controller as well, if that helps.
How can I make it so that when I click on the Profile button on VIEW2, it populates VIEW1 with the data?
The plunker:
Working example
The html:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as mainCtrl">
<form>
<h2 class="text-primary">Get data into ng-Model from object in controller</h2>
<hr>
<div class="form-group">
<h3 ng-class="!mainCtrl.firstName? 'text-danger' : 'text-success'">Enter Name</h3>
<input type="text" class="form-control" ng-model="mainCtrl.firstName" placeholder="E.g. Anvika">
</div>
<hr>
<h3 class="text-info">This is what you are typing: {{mainCtrl.firstName}}</h3>
<button type="button" class="btn btn-success" ng-click="mainCtrl.test()">Save Name</button>
</form>
<hr>
<h3 class="text-info">This is what is stored</h3>
<h4>Doctor first name: {{mainCtrl.storedData.doctorFirstName}}</h4>
</body>
</html>
The JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['tempDataStorageService', function(tempDataStorageService) {
var register = this;
register.firstName = "";
register.storedData = tempDataStorageService;
register.test = function () {
tempDataStorageService.setName(register.firstName);
}
}]);
app.factory('tempDataStorageService', function() {
// The service object
var profile = {};
profile.doctorFirstName = "No doctor data stored";
//The functions
profile.setName = function(data) {
profile.doctorFirstName = data;
}
profile.getName = function() {
return profile.doctorFirstName;
}
// return the service object
return profile;
});
Recommendations:
Please properly format code when asking questions.
As good practice use a style guide. A good starting point is John
Papa's Angular Style Guide