I have a question concerning angular-datepicker
I can't get the max-date functionality to work on my project. I've tried several ways to pass the maxDate variable (set to current day = new Date() ) but nothing happens.
This is my markup:
div class="date-picker"
id="calendar_to"
date-picker="calendar_to"
watch-direct-changes
date
after="calendar_from"
before="calendar_to"
min-view="date"
max-view="date"
max-date></div>
I tried max-date="maxDate", max-date="{{maxDate}}", max-date="{maxDate}", max-date="{new Date()}", etc..
And I tried declaring maxDate in the controller and in a directive.
Which is the right way to do this? Haven't found a a solution in the documentation nor in the various issues reported.
Any help out there?
Thanks
In HTML: "datepicker ng-model="date" name="Date" min-date="minDate" max-date="maxDate" date-disabled="disabled">
In the controller set:
$scope.maxDate=new Date(yyyy,mm,dd,hr,min,s);
Related
I have the following code:
<input class="form-control"
uib-datepicker-popup="dd.MM.yyyy"
ng-readonly="!isEditable"
datepicker-append-to-body="true"
ng-model="logicalDepotVo.rtCreationDate"
is-open="isDatepickerOpen"
placeholder="Enter Creation Date"
ng-click="isEditable ? onCreationDateDatepickerClick() : ''"/>
The value does not view value of model, but bind model works as ng-model. When I removed uib-datepicker-popup, all works fine. I tried to remove custom format, play with other attributes, but have no any successful result. Maybe, somebody has an idea what should be done?
Probably this could explain your issue (check you ng-model for correct date format):
ng-model - The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.
angularjs bootstrap
i want to know if it is possible to integrate the existing Datepicker Directive from Cumulocity into my Cumulocity App.
Currently it is difficult to use a own datepicker directive because of the older angular version in use.
Best regards,
Meykel
The datepicker used is based on the datepicker popup available here. It is, however, an old version of it.
Here is a basic example of it's use:
<input ng-init="currentDate = new Date(); isPopupOpen = false"
ng-model="currentDate" datepicker-popup datepicker-append-to-body="false"
show-button-bar="false" show-weeks="false" is-open="isPopupOpen"
ng-click="isPopupOpen = !isPopupOpen">
The directive in question is called c8yDateTimePicker.
It is restricted to elements and attributes.
<div c8y-date-time-picker ng-model="ctrl.input.dateFrom"></div>
Here some images from the datepicker
Best regards,
Meykel
Trying to bind date to input, but it is not binding:
<body ng-app>
<div ng-controller="MainCtrl">
<input type="date" ng-model="dateString"/>
<br/>{{ dateString }}
<br/><input type="date" ng-model="date1"/>
<br/>{{ date1 }}
</div>
</body>
function MainCtrl($scope, dateFilter) {
$scope.dateString = "2015-08-11T00:00:00";
$scope.date1 = new Date("2015-08-11");
}
http://jsfiddle.net/47fLdefo/
What am i doing wrong?
Your jsfiddle contains error. You forgot to define module. see here. It is working. Another thing you can not bind a string to a date. string has to be converted into date before binding by new Date(yourDateString).
$scope.dateString = "2015-08-11T00:00:00";
Above should be changed by following
$scope.dateString = new Date("2015-08-11T00:00:00");
Edit: I did not notice that your angular version is 1.0.2. input type date is not there. Try to upgrade your angular.
See date is not binding in 1.0.2
I feel a few things need clarifying as the other answers have glossed over it. The issue is not directly module definition (whilst that is an issue in itself).
The issue is support for using inputs with a type of date was not added until v1.3 according to this source however your using v1.0.2.
If you want to use inputs with the native date picker you will need to upgrade your version of Angular.
Also using a type of date the model value must be a date object not a string representation according the the docs: https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
There are other options if you can't upgrade such as BootStraps date picker however.
I have found an issue with validation of a manually typed date value that falls outside of the minDate or maxDate values when using the datepicker-popup.
This can be demonstrated with the datepicker popup on the angular ui site by following the steps below: http://angular-ui.github.io/bootstrap/#/datepicker
Ensure the min date option is turned on (min date should equal today)
Type in yesterdays date to the datepicker-popup
This shows a red border around the inline datepicker (as it is flagged as ng-invalid-date) however the input box for the datepicker-popup is still valid.
On further investigation it seems that the ng-invalid-date attribute has been set against the popup part of datepicker and not against the input box. This causes issues because firstly, the user cannot see that the element is invalid and secondly the popup does not have a name property so I am unable to check validity from the ng-form (e.g. myForm.myDate.$invalid
Does anyone know any way around this?
You can do an additional validation on ng-change for the text field and setValidity of that field to false to achieve what you want. Here is a plunker that demonstrates the idea.
http://plnkr.co/edit/N9Hk9QFIfj3IXfHoWwbt?p=preview
I added a little css styling to get the red border to show when the field is invalid. The validity test is very basic; you'd want to enhance it to allow the current day.
If you have the input set up like this, <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" is-open="open" datepicker-options="datePickerDateOptions" close-text="Close" ng-change="change()" />
then in your controller you can check what $scope.date is in your $scope.change() function. If $scope.date is undefined then its not valid. If its null then its empty. Anything else is a valid date.
I forked the Plunker code from the AngularUI Bootstrap pages (the Datepicker example). I wanted to implement a max date range so you can only select a date in a certain period. You can find the Plunker here: http://plnkr.co/edit/vBrgyC20FBEUzuoprhlh?p=preview
Somehow, the maxDate attribute does not seem to be working while the minDate one does. Does anyone know if I'm doing something wrong here or if it's just a bug?
Your HTML in the plunker
<datepicker min="minDate" show-weeks="showWeeks"></datepicker>
What it should have been
<datepicker min="minDate" max="maxDate" show-weeks="showWeeks"></datepicker>
Seems you just forgot to add the max-attribute?
You have two date pickers in there. :)
<datepicker min="minDate" max="maxDate" show-weeks="showWeeks"></datepicker>
Worked for me as well, i was struggling with the attribute max-date", Thanks ivarni for your answer