feat(datepicker): add date picker popup version

[kambojankit]

@valorkin i am trying to use the date-picker popup, instead of date-picker (as per our needs), but i am unable to make it work yet.
I was trying out to update the code, but could not make my changes successfully.
can i as for your suggestions, some pointers or approach to complete what is left in the popup.

[sanjayjha]

So is this resolved? If yes can I get an example to use this feature?

[jhuntoo]

I really need this in my project - is there anything I can do to help this along?

[kambojankit]

@jhuntoo @sanjayjha i was unable look at it due to urgent project needs. For the time being we settled with ng2-datepicker. Hope that helps.

[sanjayjha]

Any update on this?

[softgandhi]

+1. I would also love to get this feature.

[ghost]

+1 for me as well.

[piotrmalecki]

+1

[AlexandrAnash]

+1

[spatlollaa]

+1

[dothedesign]

+1 please

[malifai]

+1

[danielle5]

+1

[steveburkett]

+1

[fuitattila]

+1

[jasonkrot]

plusone

[Mighnus]

I like the same feature. Is it planed?

[valorkin]

yeap, just I after I will get modals working

[NandanPhadke]

Thanks @valorkin. I require this for my project as well. Looking forward to using this.

[valorkin]

modals is working already, so I am working on datepicker popups

[sraparlatmw]

+1

[boban100janovski]

+1

[ElBart00]

+1

[vibrant-aaronstreate]

+1

[geejay]

+1

[Dinistro]

Please stop post +1, this messes up our notifications...

[wtreur]

@exedor I seem to have your example with the popup over working together with @pnahtanoj css trick, but I used the .popover class instead. Like so:

/deep/ .popover {
  max-width: none;
}

Perhaps this is a version difference? I'm using 1.6.3

(Also: @pnahtanoj, thanks for the /deep/ trick to bypass Angular2's css encapsulation.

[lexon0011]

Is there a roadmap or a date from when the popup in the datepicker will be supported?

[ericocampos]

I've done my pop up calendar using a few features:

• input-group
• input-group-addon
• dropdown-menu

<div class="input-group" dropdown> <input type="text" class="form-control" value="{{dtFinal | date:'dd/MM/yyyy'}}"> <div class="input-group-addon calendar-point" dropdownToggle> <span class="icon-calendar"></span> </div> <div dropdownMenu class="dropdown-menu dropdown-date"> <datepicker [(ngModel)]="dtFinal" [minDate]="minDate" [showWeeks]="true"></datepicker> </div> </div>

Here is a picture of it:

[lexon0011]

Thanks for your response - good workaround, but if I click on the "next" or "previous" button in the month pane, then the drowdown/datepicker will be closed. Is there a simple way to avoid this behavior?

[ericocampos]

@lexon0011 I solved this with <div class="input-group dropdown" dropdown autoClose="outsideClick">, but we have another problem, when I choose a date, the calendar will not close, only when I click outside it , For me it's ok, but for you it may not be the best solution

[Hesesses]

So disappointed to see that this issue hasnt been fixed in a year :(

[gardecki]

Do you know any well working Angular 2+ datepicker alternative with popup "feature"? I think it's not worth relying on ngx-bootstrap as "top priority issue" hasnt been fixed in a year :/

[ericocampos]

@gardecki I've found this one https://www.npmjs.com/package/angular2-material-datepicker, when I was looking for this, I don't test it yet, since I skipped this part of the project to do other things more important.

[fleskesvor]

For my own project, I'm "wrapping" ng-bootstrap's datepicker in a custom component to achieve two-way binding with a date string, since that one can't handle date objects or strings, but has a nice popup. It's a hacky solution, I know, but there are no good alternatives yet that I know of.

[malifai]

@gerdecki I'm using materialize-css. No need for an angular wrapper around it, you can easily create one yourself if you need one.

[bubby248]

Well I used kekeh mydatepicker.This served all my purpose

[lucasselliach]

@bubby248 I'm using too. But the ngx-mydatepicker. (from kekeh)

difference between these two is that with the ngx-mydatepicker you can define the style of input box, calendar and clear buttons.

[kamikaze]

f-ing sh*t... 1 year and still nothing? this is a joke

[fleskesvor]

This is a free and open source project—you have paid nothing and are owed nothing. If you are unhappy with the progress, you can find an alternative, or make a fork and fix it yourself.

[fabiohbarbosa]

+1

[eestein]

@ericocampos answer works, but it's missing * before dropdownMenu:

<div class="input-group" dropdown> 
    <input type="text" class="form-control" value="{{dtFinal | date:'dd/MM/yyyy'}}"> 
    <div class="input-group-addon calendar-point" dropdownToggle> 
        <span class="icon-calendar"></span> 
    </div> 
    <div *dropdownMenu class="dropdown-menu dropdown-date"> 
        <datepicker [(ngModel)]="dtFinal" [minDate]="minDate" [showWeeks]="true"></datepicker> 
    </div> 
</div>

[FloRest]

Are you still planning to do it ?

[valorkin]

There are already working version of datepicker in @next version,
in next couple of weeks it should be available in latest version

[valorkin]

Popup datepicker *

[lexon0011]

is it also available for the timepicker?

[wagnereliakim]

Incrementing the @ericocampos and @eestein implementation's, because the 'popup' was closing on month navigation..

            <div class="input-group" #dataAberturaInicio="bs-dropdown" dropdown [autoClose]="false">
              <input id="dataAberturaInicio" type="text" class="form-control" readonly
                     value="{{consultaAvancadaForm.get('dataAberturaInicio').value | date:'dd/MM/yyyy'}}">
              <div class="input-group-addon calendar-point" dropdownToggle>
                <span class="fa fa-calendar"></span>
              </div>
              <div *dropdownMenu class="dropdown-menu dropdown-date">
                <datepicker formControlName="dataAberturaInicio" [showWeeks]="false"
                (selectionDone)="dataAberturaInicio.hide()"></datepicker>
              </div>
            </div>

[DavesBrain]

At the risk of "piling on", wondering what the current status of this issue is.
I am using ngx-bootstrap datepicker but need to place it in a popup.
Safe to say this is still under development?

[valorkin]

Polishing https://valorkin.github.io/ngx-bootstrap/#/datepicker#examples
Date and date range picker, they are available in @next for several months, but not documented yet

[valorkin]

working version is merged in development branch
on monday it will be tested\released in minimal configuration
next week will be testing stabilization
and will be adding one feature after another

[valorkin]

added :)
Work in progress, it has minimal functionality
but I am fully focused on datepicker now,
so next update of it will be next week

new datepicker (new style and pop up version)
available in v1.9.0+
check this out: http://valor-software.com/ngx-bootstrap/#/datepicker#examples

[valorkin]

and, forgive me for such long waiting time :(

[shubhv1]

@valorkin Do we anything like standalone timepicker on popup?
In my project, I am using ngx only and I don't want to install any other module.