I am using the angular ui datepicker widget from the angular ui bootstrap library (http://angular-ui.github.io/bootstrap/). By default, the datepicker only allows today or later dates to be enabled. All dates before today are disabled. I would like all dates on the datepicker to be enabled. How can I do that? Please advise.
The following site shows how to disable weekends only.
http://angular-ui.github.io/bootstrap/
I change the scope function (from that site) so all weekends are enabled. But all dates (weekdays and weekends) before today are still disabled.
My code update for controller for the $scope.disabled() function :
$scope.disabled = function (date, mode) {
return false;
};
Here is my markup with the datepicker widget:
<input type="text" id="textSearchUpdatedDate"
uib-datepicker-popup="{{format}}" ng-model="updatedDateChangeText"
ng-change="searchUpdatedDateChanged()" ng-keyup="searchUpdatedDateChanged()"
is-open="status.opened"
min-date="minDate"
max-date="maxDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" />
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
Removing the min-date and the max-date attributes might help.
Related
In this plunk I have an Angular UI datepicker that shows up below the input field. I want the calendar to be displayed on top of the field, so I tried with popup-placement="top-left" but it doesn't work. Any ideas?
HTML
<p class="input-group">
<input type="text" class="form-control" ng-model="dt" is-open="opened"
datepicker-popup="dd-MMM-yyyy" popup-placement="top-left"
datepicker-options="dateOptions" 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>
Javascript
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {
$scope.opened = false;
$scope.dateOptions = {
showWeeks: false
};
$scope.open1 = function(event){
event.preventDefault();
event.stopPropagation();
$scope.opened = true;
};
});
popup-placement directive does not exist on ui-bootstrap version 0.13.
it seems like it's only been added since version 1.2.0.
Best thing would be to update your version, previous versions don't seem to support that option (you can always manipulate the css but that's quite dangerous).
Working plunker with updated ui-bootstrap and angular versions.
i have solved your problem and created a plunker: http://plnkr.co/edit/PsCjLBzWk5QRHO2EIPIe?p=preview.
your ui-bootstrap version should be updated.
you need to updated your angularjs version 1.5.0, ui-bootstrap version 1.2.4, bootstrap 3.3.6, and then add uib-datepicker-popup="{{format}}" to your datepicker input element.
at the moment my datepicker works fine. But I need to fix something.
Saturdays and Sundays days are disabled, so they can't be selected.
As I know, the official documentaion says nothing about this feature. Maybe with template-url, but anyway dont know where to find it.
Any idea? I think it's really easy to solve it.
Since it's in spanish, I need to enable sab. and dom. columns.
Thanks.
If you refer the docs, disabled dates is achieved by:
JS:
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
HTML:
So, you can enable weekends by removing this chunk of code from your datepicker's code, i.e removing the date-disabled attribute passed to datepicker:
date-disabled="disabled(date, mode)"
Complete HTML:
<input type="date" class="form-control" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
You do not have to change any html. You can just put in dateOptions in controller:
$scope.dateOptions = {
dateDisabled: false
};
and remember to add datepicker-options="dateOptions" to your input in html (btw other specified in html options can be moved to controller, too):
<input type="date" class="form-control" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
I'm currently working on a angular datepicker. To do so, I use the UIBootstrap datepicker. But I'm facing a problem. I need to use the init-date attribute :
init-date : The initial date view when no model value is specified.
The attribute seems to be available only on the datepicker directive. The fact is that I sue the popup datepicker and not the datepicker himself. There is the html for the datepicker-popup
Html
<input type="text" class="form-control " datepicker-popup="dd/MM/yyyy" ng-model="date" is-open="opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
I want to know If there is something like the init-date for the popup-datepicker. I had thougth about the datepicker-options but I wasn't capable of doing something who works with this idea. Nevertheless, is it possible to make it works with this datepicker-options ?
Well It was definitely on the datepicker-options but it doesn't works because of a problem due to a bug in angular-ui-bootstrap 0.12.1.0. This problem is solve in the latest version of angular-ui-bootstrap (0.13.0)
I have datepicker ,in which i want to configure initDate so that if model value is null then datepicker show default selected date.
Here is the HTML:
<span class="input-group">
<input type="text" id="input_empdob" ng-readonly="isEmployeeRelieved" readonly placeholder="mm/dd/yyyy" min="mindobDate" max="maxdobDate" ng-change="setYearOfPassing(); setJoiningDate();" class="form-control" datepicker-popup="{{format}}" ng-model="employee.dob" datepicker-options="dateOptions" is-open="emp_dob_opened" ng-required="true" close-text="Close" name="input_empdob"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event); emp_dob_opened = true;"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
and in controller i have configured datepicker-options like:
$scope.dateOptions = {
'init-date': new Date(1991,01,02)
};
at first time while loading it behaves fine, but when on save, when i clear model value then it does not show initDate properly as configured.
Thanks for any help.
I tried to use it too, didn't work.
so, i am using the initialization with the model.
in my controller i set it like:
$scope.initialDate: $filter('date')(new Date(), 'dd/MM/yyyy');
I am trying to use the angular-ui bootstrap for dateranges.
http://angular-ui.github.io/bootstrap/#/datepicker
The link contains some good examples. However I want to use controller as syntax and not the scope as it shows in the link above.
I have attempted it as seen below. But its not showing the calendar box when its clicked on. Its not returning any errors either so im a bit lost as to what I need to do. I think my example is close.
Here is my attempt on fiddle
Code snippets below..
js_file.js
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function() {
self = this;
self.someProp = 'Check This value displays.. confirms controller initalised'
self.opened = {};
self.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
self.opened = {};
self.opened[$event.target.id] = true;
// log this to check if its setting the log
console.log(self.opened);
};
self.format = 'dd-MM-yyyy'
});
index.html
<body>
<div ng-controller="DatepickerDemoCtrl as demo">
<style>
#dateFrom, #dateTo { width: 200px;}
</style>
{{ demo.someProp }}
<div class="form-group">
<div class="input-group">
<input type="text"
class="form-control date"
id="dateFrom"
placeholder="From"
ng-click="demo.open($event)"
datepicker-popup="{{demo.format}}"
ng-model="demo.dtFrom"
is-open="demo.dateFrom"
min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" >
<input type="text"
class="form-control date"
id="dateTo"
placeholder="To"
ng-click="demo.open($event)"
datepicker-popup="{{demo.format}}"
ng-model="demo.dtTo"
is-open="demo.dateTo"
min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" >
</div>
</div>
</div>
</body>
The problem here seems to be that since UI Bootstrap 0.11.0 they have removed the "open on focus". (see source)
The plunkr below shows one possible workaround using ng-click to open the date picker.
change your current ng-click from the dateFrom input to:
ng-click="demo.dateFrom=true"
and the input field for dateTo to:
ng-click="demo.dateTo=true"
Plunkr - Working Bootstrap Date-picker
The source below shows several other workarounds if you are looking for a solution which opens the date picker on focus, rather than using ng-click.
Source: UI Bootstrap Github