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:

<div class='input-group date asm-date-time-picker'> <input id="{{::id}}" name="{{::id}}" type='text' class="form-control" ng-model="model[options.key]" ng-disabled="to.disabled" datetimepicker datetimepicker-options="{{to.dateTimePickerOptions}}"/> <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:

<div class='input-group date'> <input id="{{::id}}" name="{{::id}}" type='text' class="form-control" ng-model="model[options.key]" ng-disabled="to.disabled" datetimepicker datetimepicker-options="{{::to.dateTimePickerOptions}}"/> <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' } } } }