atais / angular-eonasdan-datetimepicker Goto Github PK
View Code? Open in Web Editor NEWA wrapper directive around the Eonasdan Datepicker v4 component.
License: MIT License
A wrapper directive around the Eonasdan Datepicker v4 component.
License: MIT License
ngModel.$render = function () {
- $element.data('DateTimePicker').date(ngModel.$viewValue);
+ if (!!ngModel.$viewValue) {
+ $element.data('DateTimePicker').date(ngModel.$viewValue);
+ } else {
+ $element.data('DateTimePicker').date(null);
+ }
};
With above changes, bootstrap datetimepicker's clear button will not work, for setting empty value is not allowed.
demo: http://plnkr.co/OMmKHw
I am seeing the following warning in the console:
Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info. Arguments: [0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: Fri Feb 03 2012 00:00:00 GMT+0000 (GMT), _f: undefined, _strict: undefined, _locale: [object Object]
From what I can tell, this is caused by this line: https://github.com/atais/angular-eonasdan-datetimepicker/blob/master/dist/angular-eonasdan-datetimepicker.js#L35
It appears that the value of ngModel.$viewValue
is a string in the following format, and moment are deprecating the creation of moment objects using strings that are not in ISO format (as described in the moment.js documentation):
Fri Feb 03 2012 00:00:00 GMT+0000 (GMT)
I have tried setting the value in my bound $scope property to be a moment object and a Javascript date object, but in either case it appears to get converted to a string somewhere along the line. I wonder if it is due to the difference between $modelValue and $viewValue but unfortunately I'm not sure how this works in enough detail.
Any help would be greatly appreciated :)
I can get value from ng-model but i cannot set it. Also if i change property inside options, it doesnt take effect. Any ideas what it might be? I literally copied example from your plunker.
PS: i found solution for ng-model not working, datetimepicker attribute was on wrong element, but i still canont change options "on fly". I also noticed if i put 120 into stepping it still lets me choose every hour instead of every second hour as it should.
Here is the input:
<input datetimepicker options="{format: 'YYYY-MM-DD'}" type="text" class="form-control" name="myDate" ng-model="myDate" required>
And I set the date in controller:
$scope.myDate = '2019-03-25'
Now the directive shows the date as '2019-03-24'. I think even if there is no time selection (because of the format) it still takes it into consideration as 00:00 and because of UTC timezone it shows a day before.
I could only get over this by setting the date with some dummy time value:
$scope.myDate = '2019-03-25T14:00:00'
Is there a better solution? I don't want to change the date format in my controller because it actually comes from an API response.
Hi, how in simple way change min/max date for two connected date pickers?
Only by directly assign options with min/max date using onChange function?
Hi,
I'm experiencing a weird problem on the picker. This is what happens.
When datetimepicker is show for the first time it shows the current date.
Then after opening it again it shows the correct date.
I've tried setting the defaultDate option but it's still not working.
Looking forward to your response.
Thank you.
Error in time, any idea
I did setup exactly the same way as your plunker with the only difference that I use scope instead of controller as. Your plugin picks up the properties that way but value does not change. I've set up watcher on the model and it does not see the change in the value even though control shows and you can pick and choose date and that sets in to input box.
Hi, I finished here because is the only date time picket that worked for me and that I like. But I was looking how to set a default hour to 00:00. Does it is supported? I did not found anything on documentation.
Hi, this is working, but how can change date format, use seconds and assign an init datetime.
I want to do something like this:
defaultDate: moment(dateNow).hours(0).minutes(0).seconds(0).milliseconds(0),
format: "MM/DD/YYYY HH:mm:ss",
locale: 'es',
Thanks
Hello.
Thank you for your code.
I would like to report some problem which occurs in specific case. I would like to use your directive inside template which is dynamically loaded via another directive which displays template in custom modal window. I have created plunker with sample source code which shows where problem is... I have also included solution (see ae-datetimepicker-mod.js file from plunker) - I have added de-initialization code to your code...
I know that probably code which creates modal (see axOverlay.js in plunker) with dynamically loaded template could be changed (or another solution could be used) but it is used in many places of application and maybe my proposed solution to your code would be acceptable... What is your oppinion?
I updated to this version of the control, and moved the control to a input group instead of the input type and I can't figure out how to make the angular error stuff work. Any suggestion ?
Documentation says:
Simply add datetimepicker tag and add the ng-model (required) attribute. Currently the datetimepicker tag can be added on either input-group or the input element.
Apparently using a HTML5 input field and having ng-model aswell as datetimepicker directive on it will not work.
<div class="input-group" >
<input type="text" class="form-control" datetimepicker
ng-model="vm.date" options="vm.options"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
angular.module('plunker', ['ae-datetimepicker'])
.controller('controller', ["$timeout", function ($timeout) {
var vm = this;
$timeout(function() { // simulating a REST API Call that takes 500 ms
vm.date = moment('2015-11-20T22:10:50Z');
}, 500);
vm.options = {format: 'YYYY/MM/DD HH:mm', showClear: true};
}]);
However, setting vm.date = moment('2015-11-20T22:10:50Z');
without a $timeout (which simulates a REST API call for me) will work fine.
The very same code also works fine when using the directive on the input-group:
<div class="input-group" datetimepicker
ng-model="vm.date" options="vm.options" >
<input type="text" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
See this plunkr: http://plnkr.co/edit/BNBcajgd6gD9bNksm4TM?p=preview
Hope this helps.
I tried to use this on an AngularJS project, but the plnkrs aren't working anymore, making it hard to find out why the popup is not opening when clicking the input.
I'm using this in a project that is updating from Angular 2 to Angular 6 (I'm well aware that this is a huge jump). Will there be support for Angular 6 for this datetimepicker? If so, do you know what the timeframe for that is? Thanks!
Hi,
We are using jQuery 3 in our project. But when resolving dependencies, NPM complains that angular-eonasdan-datetimepicker depends on jquery ~2. Can the dependency be changed to ">=2" instead? I currently see no problem. Or is there any?
Thanks in advance :)
I know an issue is not a question, but I can't find any example
Is it possible to update the min and max date dynamically?
Hi!
Based on your Simple example with one datetimepicker http://plnkr.co/edit/n8L8UZ I discovered a problem, and I'm not sure if this is more a problem of the bootstrap-datetimepicker or with this angular directive. Nevertheless, I thought I should report it.
Expected behaviour (works with 4.17.37):
(Open the plunkr above and run it)
Press Add +1w about 5 times (it MUST jump you to at least one month later then the current month)
Press the calendar icon
The selected day and the selected month should appear
With 4.17.42 this does not work.
See also the two uploaded screencasts (as GIF)
Bug demo: https://plnkr.co/M0nMTy
To see the bug, select one of the first twelve days of any month, say 08/02/2016, and see that the picker changes it to 02/20/2016 (the 20th is today's date at the time of writing). Select 08/03/2016 and it changes to 03/20/2016.
The main difference is that the datetimepicker
and ng-model
attributes are on the input element rather than the containing div, which according to your readme is allowed.
Before I discovered that the placement of datetimepicker
had an impact, I also discovered that it fixed the problem to change this line to dpElement.data('DateTimePicker').date(ngModel.$viewValue.clone());
. I don't know the significance of that. Now that I know the placement of datetimepicker
has an impact, it seems like there might be a deeper issue than .clone()
.
If you run the plugin with any version of momentjs after 2.9+ the browser will produce a warning similar to the message below. I was using the format "hh:mm A" which is a valid ISO format according to the latest momentjs documentation.
Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to moment/moment#1407 for more info.
Arguments: [object Object]
Error
at Function.createFromInputFallback (https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js:6:2710)
at oa (https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js:6:10865)
at Ia (https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js:6:14772)
at Ha (https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js:6:14633)
at Ga (https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js:6:14353)
at Ja (https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js:6:15085)
at Ka (https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js:6:15119)
at a (https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js:6:202)
at Og.a.$render (https://rawgit.com/atais/angular-eonasdan-datetimepicker/0.3.8/dist/angular-eonasdan-datetimepicker.min.js:1:468)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js:286:500
Hi. I was trying to add the datetimepicker into my webpage, and though the UI shown up fine but upon loading the webpage I see the following error:
angular.js:14525 TypeError: Cannot read property 'length' of undefined at Function.map (jquery-1.10.2.js:789) at angular-eonasdan-datetimepicker.js:22 at Scope.$digest (angular.js:17999) at Scope.$apply (angular.js:18269) at bootstrapApply (angular.js:1917) at Object.invoke (angular.js:5003) at doBootstrap (angular.js:1915) at bootstrap (angular.js:1935) at angularInit (angular.js:1820) at HTMLDocument.<anonymous> (angular.js:33367)
How to resolve this issue?
[Update]
Sorry that I forgot to write my html code here. I have followed the given example. I have attached the code snippet here. Don't know why if I paste the code here it is not showing up.
code.txt
I have included the javascript and declared the directive in my angular. The UI is showing up fine but when I inspect the page the error mentioned showed up.
Hello!
I am currently using the diosney directive to load the datetimepicker on my application, and with it I am using some $validators
to test a group of dates on a page. Right now it is working fine because diosney's solution uses the ng-model
on each <input>
, but I want to be able to open the datetimepicker by clicking on the button, like your examples. This is an example of my code:
<input type="text" class="form-control" name="delivery_to" id="delivery-to"
ng-model="vm.deliveryTo" required validate-after-date="delivery_form.delivery_from"
datetimepicker datetimepicker-options="{{ vm.getDateTimePickerOptions() }}">
But with your code, the model is declared with the date
attribute on the div.input-group
. How do I use the same validation but with your directive? I am testing some modifications on your plunker, but it's throwing a lot of errors.
Now I see that you update the maxDate on on-change
event... By using this approach I would have to modify a lot of code, but maybe it's a solution.
I just tested this on the plunker(http://plnkr.co/edit/ZSjN8f?p=preview), but the inline version disappears after a click.
Is this possible? Some way to access the show methods would work, adding a click event and then firing the show() method, such as: Eonasdan/tempus-dominus#704
in diosney version existis a possibility of this code:
.module('app', [
'datetimepicker'
])
.config([
'datetimepickerProvider',
function (datetimepickerProvider) {
datetimepickerProvider.setOptions({
locale: 'en'
});
}
]);
I use format 'YYYY-MM-DD' option and bind ng-model="formData.date" to my field. Now if I enter '2015-03-05aaaaa', the date is displayed as '2015-03-05', but my $scope.formData.date becomes '2015-03-05aaaaa'. So even if I write error message to user that date is invalid, in input field it looks like totally valid value '2015-03-05' (even though $scope.formData.date is not valid). How do I stop datetimepicker from automatically correcting my dates? this misleads users.
Hi,
I watch in exemples you pick the date but not the hours. How to set the datetimepicker to select date and time?
Regards
Hello,
Here is the plunker forked from one of the example provided here:
http://plnkr.co/edit/YcPQNstLRsFxND4r3a7Z
I added a line showing the dirty state of the form at the very bottom.
This is a serious issue for me. Is this something to your knowledge? any workaround or fix for this?
Thank you.
I'm setting the ng-model of the datetimepicker to a date 4 days past and the maxDate to today. When I render the page, the current date show for less than a second and then it changes to maxDate. If I use anything different from today as maxDate, it keeps the correct current date. The problem is only when i set maxDate to today:
CONTROLLER:
var finishDate = moment();
var startDate = moment();
startDate.subtract(4, 'days');
$scope.interval = {
start: startDate,
finish: finishDate
};
var today = moment();
$scope.startDateOptions = {
format: 'DD/MM/YYYY',
maxDate: today
};
HTML:
<div class="form-group">
<div class="input-group" datetimepicker ng-model="interval.start" options="startDateOptions">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="input-icon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</span>
</div>
</div>
How can I fix this? How can I have the maxDate set to today without change the current date?
TY!
Plunkr: http://plnkr.co/edit/C5eIVre55XUFbCet5c8p
Even when i set it as defaultDate, or set useCurrent to false it's still happening, right now this is causing me to not using this.
My HTML currently looks like the below. As you can see, I've added two input-group-addons
with which the user will be able to go to the next / previous day without opening the datepicker.
<div class="input-group">
<span class="input-group-addon previous-day" ng-click="addDays(-1, $event); ">
<span class="fa fa-angle-left"></span>
</span>
<input class="form-control" datetimepicker ng-model="value" options="options" on-change="onChanged()" />
<span class="input-group-addon next-day" ng-click="addDays(1, $event)">
<span class="fa fa-angle-right"></span>
</span>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
This is how I'm setting the date to the next / previous day:
$scope.addDays = function(howMany, $event) {
if($scope.options.date) {
$scope.options.date = $scope.options.date.add(howMany, 'days');
}
}
The problem
When I click on the span, the datepicker is opened, which it is expected to do for the addon with the calendar icon, but obviously I don't want it to open when the user clicks on one of the arrows.
What I've already tried
dtpInstance.hide();
right after changing date$('.bootstrap-datetimepicker-widget').css('display', 'none');
and $('.bootstrap-datetimepicker-widget').css('display', 'block');
None of the above gave me the result I expected.
How can I do this the right way?
I am having some trouble getting ngMessages working. I am using a custom directive I found on
StackOverflow called setTouched, but it is only halfway working. If I visit a field, then leave it all is ok, but if I just hit submit then the error message is not displayed on the fields, they are just highlighted. Here is a plunker:
Validation with ngMessages
If anyone has time to look at it, or make an example it would be great!
Cheers, jet
hey how to close the datetime picker after selection of time, I tried using autoClose: true and autoclose: true,
when ever I use the auto close option i am getting the following errors.
angular.js:13642 TypeError: option autoclose is not recognized! at Boolean.<anonymous> (https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/4.17.37/build/js/bootstrap-datetimepicker.min.js:8:22416) at Function.each (https://code.jquery.com/jquery-2.2.4.min.js:2:2911) at Object.l.options (https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/4.17.37/build/js/bootstrap-datetimepicker.min.js:8:22372) at c (https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/4.17.37/build/js/bootstrap-datetimepicker.min.js:9:2055) at HTMLDivElement.<anonymous> (https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/4.17.37/build/js/bootstrap-datetimepicker.min.js:9:2427) at Function.each (https://code.jquery.com/jquery-2.2.4.min.js:2:2861) at n.fn.init.each (https://code.jquery.com/jquery-2.2.4.min.js:2:845) at n.fn.init.a.fn.datetimepicker (https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/4.17.37/build/js/bootstrap-datetimepicker.min.js:9:2297) at Object.link (https://rawgit.com/atais/angular-eonasdan-datetimepicker/0.3.8/dist/angular-eonasdan-datetimepicker.min.js:1:904) at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js:16:230 <div class="input-group ng-pristine ng-untouched ng-valid ng-isolate-scope" datetimepicker="" on-change="vm.update(vm.dateFrom, vm.dateTo)" ng-model="vm.dateTo" options="vm.optionsTo">
angular.js:13642 TypeError: Cannot read property 'date' of undefined at Og.a.$render (VM579 angular-eonasdan-datetimepicker.min.js:1) at VM576 angular.min.js:286 at m.$digest (VM576 angular.min.js:142) at m.$apply (VM576 angular.min.js:145) at VM576 angular.min.js:21 at Object.invoke (VM576 angular.min.js:41) at c (VM576 angular.min.js:21) at Ac (VM576 angular.min.js:21) at fe (VM576 angular.min.js:20) at HTMLDocument.<anonymous> (VM576 angular.min.js:315)
TypeError: Cannot read property 'format' of undefined at VM579 angular-eonasdan-datetimepicker.min.js:1 at Function.map (VM573 jquery-2.2.4.min.js:2) at VM579 angular-eonasdan-datetimepicker.min.js:1 at m.$digest (VM576 angular.min.js:142) at m.$apply (VM576 angular.min.js:145) at VM576 angular.min.js:21 at Object.invoke (VM576 angular.min.js:41) at c (VM576 angular.min.js:21) at Ac (VM576 angular.min.js:21) at fe (VM576 angular.min.js:20)
Following is my scope with options
$scope.options = {
format: 'MM/DD/YYYY hh:mm A',
sideBySide: true,
autoclose: true
}
my html to render the datetime picker.
<div class="form-group"> <div class="input-group"> <input name="eventstartdate" id="eventstartdate" class="form-control" datetimepicker data-ng-model="event.eventstartdatetime" options="options"> <span class="input-group-addon span-date-icon"> <i class="fa fa-calendar"></i> </span> </div> </div>
any help appreciated.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.