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
Related
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 a slider range, and I would like the value to follow the slider without using jQuery, but only angularjs. I didn't see anything on Internet concerning this issue, is that impossible?
Thanks for answering.
Here is the code of my slider :
<input type="range" min="10" max="1000" ng-init="slider = 10" ng-model="slider" ng-change="adaptNumberSlider()">
Angular-slider: Slider directive implementation for AngularJS, without jQuery dependencies
http://prajwalkman.github.io/angular-slider/
I have an input that's working well with ui bootstrap:
<input type="text"
class="fromDate"
datepicker-popup="MM/dd/yyyy"
ng-model="custom_time_filter_begin"
ng-focus="showFromCalendar = true"
ng-click="showFromCalendar = true"
is-open="showFromCalendar"
show-button-bar="false"
datepicker-template-url="'blah.html'" <-----------------Doesn't work
datepicker-options="datePickerOptions"
ng-required="true"/>
And even this in my controller:
$scope.datePickerOptions =
templateUrl: 'something.html'
showWeeks: false
I'm looking through the docs: http://angular-ui.github.io/bootstrap/#/datepicker. It suggests I do those things, or even set datepickerTemplateUrl in the options or datepicker-template-url in the view, but nothing is changing. It's still using the default template.
I don't want to edit the source. I will however, copy the source into a new file and edit the HTML from there. I can't get it to point to the view file though.
P.S. I'm using coffeescript
Needed to update angular-bootstrap to latest version and then it started complaining. Fixed
If you read following Angularjs validations, you understand that:
Message will appear if user interacted and did not fill the date manually.
The problem is when date is filled using the datepicker the input is not recognized by Angularjs and still consider $invalid true, so the message remains there which is confusing/problem although date is already filled using datepicker!
<div class="form-group" ng-class="{ 'has-error' : AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine }">
<input type="text" required data-provide="datepicker" class="form-control" name="Birthdate" ng-model="Birthdate" />
<span ng-show="AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine" class="help-block" >
Birthdate is required.
</span>
</div>
You can either validate it prior to form submit, or else hook a listener on your datepicker to manually set the model property Birthdate value.
It seems bootstrap datepicker is built on top of JQuery datepicker, manually setting the value would be a bad practice you can refer to:
Update Angular model after setting input value with jQuery
a better approach would be to use some built-in angular component such as the ones from:
https://angular-ui.github.io/bootstrap/
http://dalelotts.github.io/angular-bootstrap-datetimepicker/
https://github.com/dalelotts/angular-bootstrap-datetimepicker
I discovered a new way for this problem-
First of all create an id for that input box and then create a function say $scope.assign(), which simply assign the id value to the model of that input.
Something Like this-
$scope.assign = function() {
$scope.modelValue = $('#idName').val();
}
Now use ng-bind="assign()" to your input box.
It worked for me :)
Was facing the issue, and its because of the picker you are using is built on top of Jquery which remains undetectable by the scope on update.
For my new project I have added another library and its pretty awesome.
See the documentation http://dalelotts.github.io/angular-bootstrap-datetimepicker
Providing the piece of code for which I have added a wrapper directive
My Previous Answer was based on work around and because at that time of answer I was pretty new to the angular and now instead of that I will recommend, not to use an library which is built on top of Jquery in Angular project. Instead prefer angular libraries.
Coming on the topic-
For date time picker I found one very good library
https://github.com/indrimuska/angular-moment-picker
You can find more libraries in built in angular, but I found it pretty useful for other validations too like min-date, max-date validation.
Using this library will solve the issue of validation for sure and its pure Angular way.
Is there anyway to get the value of the angular ui bootstrap typeahead selection before it changes the model?
Thanks alot!
Uri
There is no built in way to do this with with typeahead, but you can just store the old value in your ng-change
<input type="text" ng-model="foo" typeahead="bar in bars" ng-change="storeLast()">
$scope.storeLast() = function(){
//Before you reassign oldFoo, you can do some work with it here.
oldFoo=foo
}
However, this feels like a very strange thing to do. I think the better answer would be to redesign what you are trying to do so that you don't need weird code to do it.