atais / angular-eonasdan-datetimepicker Goto Github PK

View Code? Open in Web Editor NEW

61.0 7.0 27.0 38 KB

A wrapper directive around the Eonasdan Datepicker v4 component.

License: MIT License

JavaScript 100.00%

angular wrapper-directive datetimepicker date-picker datetime-picker datepicker

angular-eonasdan-datetimepicker's People

Contributors

Stargazers

Watchers

angular-eonasdan-datetimepicker's Issues

i m use this datetime picker i face this issue .

Existing dates are immediately overwritten by current dates, ng-bind must be moment object(?)

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.

Set time

Hi,

I watch in exemples you pick the date but not the hours. How to set the datetimepicker to select date and time?

Regards

Different behaviour with bootstrap-datetimepicker 4.17.42 vs. 4.17.37

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)

Options

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

Inline doesn't stay open

I just tested this on the plunker(http://plnkr.co/edit/ZSjN8f?p=preview), but the inline version disappears after a click.

Open on input focus

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

Set Default Hour

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.

Impossible to select dates because day replaces month

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().

Problem when used in dynamically loaded templates

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?

How to disable triggering the picker on span click

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

$event.preventDefault()
$event.stopPropagation();
Get the datepicker instance and call dtpInstance.hide(); right after changing date
Hacky stuff like $('.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 using master or 4.15.35 and does not work correctly!

Error in time, any idea

ng-change triggers when picker is opened first time (just open not change) (AngularJS)

Date not set on first open of the picker

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.

Setting minDate in erasing default/initial value (AngularJS)

How to close the datetimepicker after selection of time

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.

widget clear button not work in v0.3.4

                     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

Not Compatible with MomentJS 2.9+

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.

Cannot read property 'length' of undefined

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.

How to use $validators

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.

form is loaded in $dirty state when used with moment object

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.

Manually entered dates issues

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.

How to configure global datetimepicker options like in diosney version

in diosney version existis a possibility of this code:
.module('app', [
'datetimepicker'
])
.config([
'datetimepickerProvider',
function (datetimepickerProvider) {
datetimepickerProvider.setOptions({
locale: 'en'
});
}
]);

Support for jQuery 3 in dependencies

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 :)

current date change to maxDate if it is today

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!

ngMessages not working with datetimepicker

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

Does not set the value at all

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.

plnkr 's not working anymore

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.

Change watch for options to compare object (objectEquality == true)

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?

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format

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 :)

Two way ng-model binding not working

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.

Update min/max date dynamically

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?

NgModel not properly synced/watched when using datetimepicker directive on input field

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.

Support for Angular 6

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!

required and $error.required

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 ?

Setting date-only value from controller makes datetimepicker to display one day before

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.

atais / angular-eonasdan-datetimepicker Goto Github PK

angular-eonasdan-datetimepicker's People

Contributors

Stargazers

Watchers

Forkers

angular-eonasdan-datetimepicker's Issues

Recommend Projects

Recommend Topics

Recommend Org