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" />
Related
The date picker plugin is still working even if the field is readonly.
<input name="SpecialFields_{{::field.FieldID}}" ng-model="newUserObj.specialfields[field.FieldID]" type="text" class="DatePickerClass form-control" uib-datepicker-popup="{{format}}" datepicker-localdate is-open="popup.customDate[$index].opened" autocomplete="off" placeholder="e.g. 01-January-2000" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" ng-required="field.RequiredField == 1" ng-readonly="field.AdminEditable && (isAdmin == 0)">
Is there any way to disable the datepicker
I think you might want to use ng-disabled="field.AdminEditable && (isAdmin == 0) instead of ng-readonly.
This will prevent changes.
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.
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
I'm using angular date-picker as follows:
<input type="text" class="form-control input-sm" datepicker-popup="'dd-MMMM-yyyy'"
is-open="false" min-date="'2000-06-22'" max-date="'2015-06-22'" ng-model="logs.systemLog.dateStart"
date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/>
I set the default dates as follows:
logs.systemLog.dateStart = '2014/8/19';
At the load, the date displays fine, but when I open the calendar and select a date, it resets to 'dd-MMMM-yyyy'. what's the issue here?
UPDATE:
I wanted to add another issue along the same line.
When I pass this date in to the REST service call, it gives me a bad request error. Following is how the URL looks like:
Request URL:http://localhost:8080/AXServices/v1/logs/systemLogs/1408453832179/Tue%20Aug%2026%202014%2018:40:32%20GMT+0530%20(Sri%20Lanka%20Standard%20Time)/?page=1&pageSize=50
This is how I pass it to the service:
function loadSystemLogs() {
var service = logServices.systemLogs();
service.query({
startDate : systemLog.dateStart,
endDate: systemLog.dateEnd,
page : 1,
pageSize : 50
},{}).$promise.then(function (response) {
systemLog.logData = response;
}, function (error) {
if(error.status === 404){
responseErrorFactory.redirectTo404();
}
else{
messageNotificationFactory.setNotification("error",error.message);
}
});
}
I have already made the model properties date objects:
systemLog.dateEnd = new Date();
systemLog.dateStart = new Date().setDate(systemLog.dateEnd.getDate() - 7);
Appreciate if you can help.
Your datepicker-popup should be like "dd-MMMM-yyyy" and not "'dd-MMMM-yyyy'". Try the following :
<input type="text" class="form-control input-sm" datepicker-popup="dd-MMMM-yyyy"
is-open="false" min-date="'2000-06-22'" max-date="'2015-06-22'" ng-model="logs.systemLog.dateStart"
date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/>
I have an ng-repeat with each row having multiple UI-Bootstrap Datepickers. I am trying to call a function in my controller when the date is selected and the picker closes. I have tried using UI-Event to capture the blur event but the model hasn't been updated when this gets called. My question is how can I get the selected date when the picker closes? Can I do something like ui-event="{ blur : 'myBlurFunction( $event, this.text)' }, or is there another way to get the data with an onClose event?
<li ng-repeat="....">
<div ng-click="openEditStartCal($event, ticket)">
<input ui-event="{ blur : 'blurredStartDate( $event, ticket, this.text)' }"
type="text"
starting-day="2"
show-button-bar="false"
show-weeks="false"
class="form-control addTicketDateInput"
datepicker-popup="dd MMM"
ng-model="ticket.StartDate"
is-open="startEditTicketOpened && currentTicketUpdating == ticket.TicketId"
min-date="{{today()}}"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close" />
</div>
I have solved this by using: ng-change="myChangeFunction()".
This is possible using ng-change :
html/jsp file
<input type="text"
id="StartDate"
name="StartDate"
class="form-control input-sm"
uib-datepicker-popup="{{format}}"
ng-model="StartDateVal"
is-open="status.opened"
min-date="min"
max-date="max"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
readonly="true"
ng-change="select(StartDateVal)" />
.js Controller
$scope.select = function(date) {
// here you will get updated date
};
You can put a $watch in your controller for your date variable.
$scope.$watch('ticket.StartDate',function(){
var date = $scope.ticket.StartDate;
});
I was dealing with this as well and onChange won't do the job for me, so I went to ui bootstrap .js and added some things. Then I can set a function to be called in HTML via on-close attribute.
<input type="text" on-close="dateClosed()" ng-model="date" datepicker-popup="dd.MM.yyyy" is-open="dateOpened" ng-click="dateOpened=true" />
then you need to change the ui-bootstrap.js at
.directive('datepickerPopup' ... function(...) ... return { ...
scope: { ... , onClose: '&' }
there are 3 options how to close the picker - date selection, click elsewhere or done button. you can find it easily, its the only place where isOpen is set to false
scope.isOpen = false;
Then i just call a function at those 3 places, where i call the function from the attribute
scope.onClosing = function () {
if (angular.isDefined(attrs.onClose))
scope.onClose();
}
If you want the ui-bootstrap.js PM me, I did it in the tpls version only tho.