button doesn't show picker

[joseglego]

It doesn't let you use a input-group-button to show the datetimepicker but the Eonasdan Datetimepicker lets you use it.

[maxdhn]

did you find a workaround ?

[joseglego]

Hello @MaxDhn, no I didn't. I changed to other library, and neither have this functionality. You will need:

1. I'm using these libs:
   • http://simeonc.github.io/sc-date-time/index.html
   • https://github.com/eight04/angular-datetime
   • But you will need: https://gist.github.com/SimeonC/7e0b5d6cae1c79deb48d - https://gist.github.com/dotfold/1f4cbee6c80885753f1a

Steps

1. Add an input with restrictions (Using angular-datetime)
2. Add a button which show the directive of dotfold or SimeonC

I hope it help you!

[franzeal]

I'm using this in Angular-Formly and was able to hook-up the button via the link function:

var input = $(el.find('input')).datetimepicker(scope.to.dateTimePickerOptions); scope.datetimepicker = input.data("DateTimePicker");

And in the template:

`

        <span class="input-group-addon" ng-click="datetimepicker.toggle()" ng-disabled="to.disabled">
            <span class="fa fa-calendar"></span>
        </span>
    </div>`

It's working fine in my application. I'm new to Angular and Bootstrap, but I would suspect you could do something similar with an additional attribute or element directive that's doing the same thing.

[TinoPham]

I have the same issue, How to show datetimepicker when click on icon calendar ? Please take a look at: http://eonasdan.github.io/bootstrap-datetimepicker/

[IvAlex1986]

Hi @diosney, Could you fix the issue please?

[IvAlex1986]

I have fixed the issue on PullRequest 32 (https://github.com/diosney/angular-bootstrap-datetimepicker-directive/pull/32). Please review my changes.

[CJYate]

@franzeal I don't follow completely: where do you put this code?

var input = $(el.find('input')).datetimepicker(scope.to.dateTimePickerOptions); 
scope.datetimepicker = input.data("DateTimePicker");

Is that in a script block within your page html?

[franzeal]

@CJBrew I've got it in a link function on a formly type that wraps this datepicker.

The type's template looks like this:

`

        <span class="input-group-addon" ng-click="datetimepicker.toggle()" ng-disabled="to.disabled">
            <span class="fa fa-calendar"></span>
        </span>
    </div>`

The link function looks like this:

link: function (scope, el, attrs, ctrl) { // Enabling the calendar button var input = (<any>$(el.find('input'))).datetimepicker(scope.to.dateTimePickerOptions); scope.datetimepicker = input.data("DateTimePicker"); },

My default options look like this (I've removed all the validation related stuff I have in here for this example):

defaultOptions: { templateOptions: { dateTimePickerOptions: { locale: 'en', format: 'MM/DD/YYYY HH:mm', showTodayButton: true, showClear: true, icons: { time: 'fa fa-clock-o', date: 'fa fa-calendar', up: 'fa fa-chevron-up', down: 'fa fa-chevron-down', previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-dot-circle-o', clear: 'fa fa-trash', close: 'fa fa-times', }, tooltips: { clear: 'Clear Selection', close: 'Close', today: 'Now' } } } }