Position date time picker box over formfield

[koeckc]

Hi,
I have a little question. Is it possible to tweak some CSS to position the date picker over the formfield as alternative to the "dropdown" behavior.

Thx in advance

[Gillardo]

Not sure i really understand what you mean? Can you create a little punkr
to show the behavior?

On Tue, Jul 14, 2015 at 12:49 PM, Constantin Köck notifications@github.com
wrote:

Hi,
I have a little question. Is it possible to tweak some CSS to position the
date picker over the formfield as alternative to the "dropdown" behavior.

Thx in advance

—
Reply to this email directly or view it on GitHub
#32.

[koeckc]

Now the behaviour is like that

I would like to change it to be like that (picker over formfield)

[Gillardo]

It seems you need to add the .dropup bootstrap class the container of the
datepicker, the problem is the top and left properties are being overriden
because of append-to-body option.

I will continue to look for you

On Tue, Jul 14, 2015 at 1:07 PM, Constantin Köck notifications@github.com
wrote:

Now the behaviour is like that
[image: screenshot_170]
https://cloud.githubusercontent.com/assets/586390/8672740/8d1d578e-2a31-11e5-8fe7-4fe056d9898f.png

I would like to change it to be like that (picker over formfield)
[image: screenshot_173]
https://cloud.githubusercontent.com/assets/586390/8672750/9e907b9a-2a31-11e5-9c87-d8ac34e86be3.png
that

—
Reply to this email directly or view it on GitHub
#32 (comment)
.

[Gillardo]

If you want to override the code manually, you can change this line in the
template from

ng-style="{display: (isOpen && 'block') || 'none', top: position.top+'px',
left: position.left+'px'}"

to

ng-style="{display: (isOpen && 'block') || 'none', left:
position.left+'px'}"

Then just add the .dropup class to your container class, and it should
work. In the Demo, the container would be

, you
need to change to

On Tue, Jul 14, 2015 at 1:27 PM, Darren Gillard darren.gillard81@gmail.com
wrote:

It seems you need to add the .dropup bootstrap class the container of the
datepicker, the problem is the top and left properties are being overriden
because of append-to-body option.

I will continue to look for you

On Tue, Jul 14, 2015 at 1:07 PM, Constantin Köck <notifications@github.com

wrote:

Now the behaviour is like that
[image: screenshot_170]
https://cloud.githubusercontent.com/assets/586390/8672740/8d1d578e-2a31-11e5-8fe7-4fe056d9898f.png

I would like to change it to be like that (picker over formfield)
[image: screenshot_173]
https://cloud.githubusercontent.com/assets/586390/8672750/9e907b9a-2a31-11e5-9c87-d8ac34e86be3.png
that

—
Reply to this email directly or view it on GitHub
#32 (comment)
.

[koeckc]

Thx for the fast response I tried your code but it doesnt work ... (box appears somewhere on the page bottom ..)

HTML
<div class="col-xs-9 dropup"> <input type="text" ng-click="openCalendar($event, prop)" class="form-control" datetime-picker="yyyy-MM-dd HH:mm" ng-model="issue.due_date" is-open="isOpen" enable-time="true" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-on-date-selection="true" datepicker-append-to-body="true" clear-text="Remove" /> <span ng-show="defectDetailForm.due_date.$error.unique" class="text-danger">{{errors_due_date}}!</span> </div>
Template

angular.module('ui.bootstrap.datetimepicker').run(['$templateCache', function($templateCache) {
  'use strict';

  $templateCache.put('template/datetime-picker.html',
    "<ul class=\"dropdown-menu dropdown-menu-left datetime-picker-dropdown\" ng-style=\"{display: (isOpen && 'block') || 'none', left: position.left+'px'}\" style=left:inherit ng-keydown=keydown($event)><li style=\"padding:0 5px 5px 5px\" ng-class=\"{'date-picker-menu': showPicker == 'date', 'time-picker-menu' : showPicker == 'time'}\"><div ng-transclude></div></li><li ng-if=showButtonBar style=padding:5px><span class=\"btn-group pull-left\" style=margin-right:10px><button ng-if=\"showPicker == 'date'\" type=button class=\"btn btn-sm btn-info\" ng-click=\"select('today')\" ng-disabled=isTodayDisabled()>{{ getText('today') }}</button> <button ng-if=\"showPicker == 'time'\" type=button class=\"btn btn-sm btn-info\" ng-click=\"select('now')\" ng-disabled=isTodayDisabled()>{{ getText('now') }}</button> <button type=button class=\"btn btn-sm btn-danger\" ng-click=select(null)>{{ getText('clear') }}</button></span> <span class=\"btn-group pull-right\"><button ng-if=\"showPicker == 'date' && enableTime\" type=button class=\"btn btn-sm btn-default\" ng-click=\"changePicker('time')\">{{ getText('time')}}</button> <button ng-if=\"showPicker == 'time' && enableDate\" type=button class=\"btn btn-sm btn-default\" ng-click=\"changePicker('date')\">{{ getText('date')}}</button> <button type=button class=\"btn btn-sm btn-success\" ng-click=close()>{{ getText('close') }}</button></span></li></ul>"
  );

}]);

[Gillardo]

here you go

http://plnkr.co/edit/aF3NfdcOXy2fqqZPpENL?p=preview

On Tue, Jul 14, 2015 at 1:42 PM, Constantin Köck notifications@github.com
wrote:

Thx for the fast response I tried your code but it doesnt work ... (box
appears somewhere on the page bottom ..)

HTML

{{errors_due_date}}!

Template

angular.module('ui.bootstrap.datetimepicker').run(['$templateCache', function($templateCache) {
'use strict';

$templateCache.put('template/datetime-picker.html',
"<ul class="dropdown-menu dropdown-menu-left datetime-picker-dropdown" ng-style="{display: (isOpen && 'block') || 'none', left: position.left+'px'}" style=left:inherit ng-keydown=keydown($event)><li style="padding:0 5px 5px 5px" ng-class="{'date-picker-menu': showPicker == 'date', 'time-picker-menu' : showPicker == 'time'}">

<span class="btn-group pull-left" style=margin-right:10px><button ng-if="showPicker == 'date'" type=button class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled=isTodayDisabled()>{{ getText('today') }} <button ng-if="showPicker == 'time'" type=button class="btn btn-sm btn-info" ng-click="select('now')" ng-disabled=isTodayDisabled()>{{ getText('now') }} <button type=button class="btn btn-sm btn-danger" ng-click=select(null)>{{ getText('clear') }}<
/button&
gt; <span class="btn-group pull-right"><button ng-if="showPicker == 'date' && enableTime" type=button class="btn btn-sm btn-default" ng-click="changePicker('time')">{{ getText('time')}} <button ng-if="showPicker == 'time' && enableDate" type=button class="btn btn-sm btn-default" ng-click="changePicker('date')">{{ getText('date')}} <button type=button class="btn btn-sm btn-success" ng-click=close()>{{ getText('close') }}

"
);

}]);

—
Reply to this email directly or view it on GitHub
#32 (comment)
.

[koeckc]

Thx .. your plnkr works great (exactly as i want it)
But if i copy your tpl code i still get this

[koeckc]

The dropup seems also not to have an effect ...

[koeckc]

but im quite sure it has something todo with my css/html ...

[Gillardo]

are you using the append_to_body option?? if so, remove that.

try creating a plunkr to replicate and i will have a look for you?

On Tue, Jul 14, 2015 at 2:13 PM, Constantin Köck notifications@github.com
wrote:

but im quite sure it has something todo with my css/html ...

—
Reply to this email directly or view it on GitHub
#32 (comment)
.

[koeckc]

That was it !!!! Thank you very much for your help

[Gillardo]

I will leave issue open, as i will see if i can remove the top code when not using append-to-body option

[koeckc]

alright ... also adding the info to the doc would help ... i guess other users will have this requirement as well