Angular ng-pick-datetime make input field invisible

Question

I am using ng-pick-datetime with datetime range with some input field and an datetime picker (calender) icon:

<div class="dl-date-time-picker">
    Date Time:    
          <input           
                [style.width]="'200px'"
                [(ngModel)]="dateTimeRange"
                (ngModelChange)="getrange($event)"
                [selectMode]="'range'"
                [owlDateTimeTrigger]="dt" 
                [owlDateTime]="dt">

          <span class="trigger" [owlDateTimeTrigger]="dt">
            <i class="fas fa-calendar-alt"></i>
          </span>    
          <owl-date-time #dt></owl-date-time>        
</div>

It looks normally, and the calender item opens correctly aligned under the icon...

But now, I would like to make the input field invisible for the user, and just offer the calender picker icon...

I used <input type="hidden" and this works so far, the problem that I now have is, that the calender item opens on the far left side of my browser window... I don't know how to fix that problem:

How can I fix that problem, its too far left side...

As per show in image , I think you have to set it with help of css. — Sachin Shah
– Sachin Shah, Commented Aug 17, 2018 at 11:16

Daniel Beckmann · Accepted Answer · 2018-08-17 11:34:08Z

1

Apparently the datetime picker needs the input field to determine the right position on the screen. You can hide the input via CSS, then it should work:

.dl-date-time-picker > input {
    visibility: hidden;
    width: 0;
}

answered Aug 17, 2018 at 11:34

Daniel Beckmann

2862 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ng-pick-datetime make input field invisible

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related