Ngx-bootstrap: 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.

[rolandoldengarm]

+1 for me as well.

[piotrmalecki]

+1

[AlexandrAnash]

+1

[spatlollaa]

+1

[dothedesign]

+1 please

[lexith]

+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

[boban984]

+1

[ElBart00]

+1

[vibrant-aaronstreate]

+1

[geejay]

+1

[Dinistro]

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

[harishrohokale]

I am looking for close datepicker after date selection or any event supported which will gives us provision to handle event?

[kamikaze]

+1 I've done everything doc says for datepicker directive but it doesn't work with any property and raises an error, but without - is doesn't showup without any error

[fdu-axiometrics]

any updates on this? It's been another month already.

[orkisz]

+1

[valorkin]

I am working on completely new version of date picker
it will cover date picker inline, popup, static and range picker
if you want be updated on progress, join slack: https://www.hamsterpad.com/chat/ng2

[valorkin]

plus I want to drop moment.js dependecy

[alfakappa]

not sure if this helps, but this works fine on my datepicker:

<div class="panel panel-datepicker">
                <div class="panel-body">
                    <form class="form-inline pull-right" (ngSubmit)="onSubmit($event)">
                        <div class="form-group" >
                            <div class="btn-group">
                                <button type="button" class="glyphicon glyphicon-calendar btn btn-sm btn-default btn-secondary" (click)="toggleStartDatePicker()"></button>
                                <input ngControl="start_dt" type="text" [(ngModel)]="start_dt" (focus)="showStartDatePicker = true; showEndDatePicker =false" class="btn btn-sm btn-default btn-secondary">
                            </div>
                          <div *ngIf="showStartDatePicker" class= "datepicker">
                            <datepicker  [(ngModel)]="start_dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
                          </div>
                        </div>
                        <div class="form-group">
                            <div class="btn-group">
                                <button type="button" class="glyphicon glyphicon-calendar btn btn-sm btn-default btn-secondary" (click)="toggleEndDatePicker()"></button>
                                <input type="text" ngControl="end_dt" [ngModel]="end_dt | date:'dd-MM-yyyy'" (focus)="showEndDatePicker = true; showStartDatePicker=false" class="btn btn-sm btn-default btn-secondary">
                            </div>
                          <div *ngIf="showEndDatePicker" class="datepicker">
                            <datepicker [(ngModel)]="end_dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
                          </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-sm btn-default submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>

TS:

export class DataPicker {
    constructor(
    ) {
        (this.minDate = new Date()).setDate(this.minDate.getDate() - 150);
    }

    @Input() start_dt_selected:any;
    @Input() end_dt_selected:any;
    /**
     * @type {Date}
     */
    @Input() private start_dt:Date;

    /**
     * @type {Date}
     */
    @Input() private end_dt:Date;

    /**
     * @type {Date}
     */
    private minDate:Date = void 0;

    /**
     * @type {boolean}
     */
    private showStartDatePicker:boolean = false;

    /**
     * @type {boolean}
     */
    private showEndDatePicker:boolean = false;

    /**
     * Output an EventEmitter so other components can subscribe to it.
     */
    @Output() start_dt_selectedChange: EventEmitter<any> = new EventEmitter();
    @Output() end_dt_selectedChange: EventEmitter<any> = new EventEmitter();

    /**
     * @description toggles the start datepicker when focus on input type or click icon
     */
    private toggleStartDatePicker():void {
        this.showStartDatePicker = !this.showStartDatePicker;
        this.showEndDatePicker = false;
    }

    /**
     * @description toggles the start datepicker when focus on input type or click icon
     */
    private toggleEndDatePicker():void {
        this.showEndDatePicker = !this.showEndDatePicker;
        this.showStartDatePicker = false;
    }

    /**
     * @description handles submit of the datepicker dates
     */
    private onSubmit(){
        this.start_dt_selectedChange.emit(this.start_dt);
        this.end_dt_selectedChange.emit(this.end_dt);
    }
}

However, I need help with: close on clicking outside datepicker
Using different formats than a full Date.

I therefor think you should NOT drop momentjs dependency, but that's up to you

[valorkin]

top prio

[valorkin]

unfortunately I am only a human :D

[tpruthi]

any update on this?

[steveburkett]

Would love an update also please

On Thursday, July 28, 2016, tpruthi [email protected] wrote:

any update on this?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-bootstrap/issues/273#issuecomment-235832905,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVfoU3y0RTh0ZGQwDSYZICl9bwUJdc_ks5qaGjYgaJpZM4HvAG-
.

[valorkin]

Join slack, so you can see updates :)

[FloRest]

+1

[seustachi]

You can achieve what you want thanks to the "selectionDone" update (the component emits an event).

Something like :

<span (click)="displayEndDatePicker = true"> <em *ngIf="newBooking.end">{{ newBooking.end | date:"dd/MM/yyyy" }}</em> <em *ngIf="!newBooking.end">End date</em> </span> <datepicker *ngIf= "displayEndDatePicker" [(ngModel)]="newBooking.end" [minDate]="newBooking.start" [showWeeks]="true" (selectionDone)="displayEndDatePicker = false"></datepicker>

The button will make sure the datepicker is displayed, and the datepicker will disappear when you choose a date.

[alfakappa]

I did solved my particular case earlier already, but the addition of "selectionDone" event emitter is a good one I think

[userdump]

'selectionDone' is perfect! Worked fine! Thanks for the info @seustachi

[tpruthi]

@valorkin should i wait for new version which you are developing or should i implement the solution provided above as of now.

[valorkin]

wait a bit please, I just returned from honeymoon vacation :)

On Fri, Sep 16, 2016, 09:57 tpruthi [email protected] wrote:

@valorkin https://github.com/valorkin should i wait for new version
which you are developing or should i implement the solution provided above
as of now.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-bootstrap/issues/273#issuecomment-247531474,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDk46jT9PBi0pqLH27G_W5XiR3ibEHEks5qqj3WgaJpZM4HvAG-
.

[bjornharvold]

Good work here! Waiting on update. #excited

[vladisOV]

any updates ?)

[marko033]

Hi, any updates? thx

[tpruthi]

Hi all you can you this datepicker till velorkin releases an update

[sarbogast]

+1

[HereThereBeMonsters]

👍

[valorkin]

https://github.com/valor-software/ng2-bootstrap/pull/1318/files#diff-47917cb7752d9ff4c3eddfa99fba920c

working on it, in a while you can check how popovers look like inside ;)

[mrivarola]

+1

[sergeu90]

when will be the result?

[nshahpazov]

+1

[szingg]

+1

[dantavo]

+1

[bubby248]

+1

[boazro]

+1

[enterframe]

+1

[JiaHongL]

+1

[elmartino]

+1

[Vnuuk]

+1

[kamikaze]

it will never be done

[vibrant-aaronstreate]

@valorkin won't let us down. It will be done.

[valorkin]

For sure

[valorkin]

Most waited, issue... actually I working on it at the moment :)

[mtabordar]

+1

[nabeelaxr]

+1

[industrylinq]

+1

[MoreOutput]

I wrote something today that may be of some help. Pasting the component and its template below.

Template:

<template #calSelection>
  <div>
    <datepicker
      (selectionDone)="closePopover($event, pop)">
    </datepicker>
  </div>
</template>
<input
  #pop="bs-popover"
  [disabled]="disabled"
  placeholder="{{ placeholder }}"
  container="body"
  class="{{ classes }}"
  [popover]="calSelection"
  triggers="{{ trigger }}"
  placement="{{ placement }}" 
  id=" {{ id }}" 
  name="{{ name }}" 
  type="text"
  value="{{ displayValue }}" />

The Component:

import { Component, Input, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';
import { FormControl } from '@angular/forms';

/*
note since this component requires container="body"
as to ensure it is absolutely positioned
we needed to alter the styles at the 'top-level'. That
adjustment is in _popover.scss
*/
@Component({
  selector: 'datepicker-input',
  templateUrl: './datepicker-input.component.html'
})
export class DatepickerInputComponent implements OnInit {
  public dt: Date = new Date();
  public minDate: Date = void 0;
  public date:Date;
  public displayValue:string;
  @Input() public trigger:string = 'click:click';
  @Input() public id:string;
  @Input() public name:string;
  @Input() public control:FormControl;
  @Input() public placeholder:string;
  @Input() public placement:string = 'right';
  @Input() public classes:string = 'form-control';
  @Input() public disabled:boolean = false;

  constructor(
    private datePipe: DatePipe
  ) {}

  ngOnInit (): void {
    if (this.name && !this.id) {
      this.id = this.name;
    }

    if (this.control.disabled) {
      this.disabled = true;
    }

    if (this.control.value) {
      this.setupDisplay(this.control.value);
    }

    this.control.valueChanges.debounceTime(200).subscribe((data) => {
      if (this.control.disabled) {
        this.disabled = true;
      }

      if (this.control.value) {
        this.setupDisplay(this.control.value);
      }
    });
  }

  private setupDisplay(dateStr:string) : void {
    this.date = new Date(dateStr);
    this.displayValue = this.datePipe.transform(this.date.toString(), 'fullDate');
  }

  public closePopover(evt:Event, popover:any): void {
    this.setupDisplay(evt.toString());

    this.control.setValue(this.date.toISOString());

    popover.hide();
  }
}

CSS to ensure a size when we want container="body":

.popover {
  max-width: 500px;
  min-width: 320px;
  height: 275px;
}

[benyaminshoham]

Go @valorkin !! Another dev is looking for this solution.

[exedor]

I too badly need a solution for a datepicker with overlay. I'm a fan of ng2-bootstrap and am looking forward to contributing to it as soon as my current project which is super urgent is over. I've tried putting the datepicker in a popover without success, and then in a tooltip without success. I just tried the above example and it also has the same problem, width is too short.

I attached a screenshot. The CSS and/or setting container doesn't seem to have any effect. I'm using 1.4.0, is that the problem? Should I not be using the npm repo and just get it right from github?

Here is the thml
<template #tmplStartDate> <datepicker id='start_date_picker' name='start_date_picker' [(ngModel)]='c.startDate' [minDate]='MIN_DATE' [dateDisabled]='dateDisabled' (click)="closeStartDatePicker"> </datepicker> </template> <input class="form-control" placeholder="Start Date" value="{{c.startDate|date:'fullDate'}}" id="start_date_input" name="start_date_input" container="body" [popover]="tmplStartDate" triggers="click" #popStartDate="bs-popover" placement="bottom"/>

[pnahtanoj]

@exedor I'm doing something similar - you just need to override the tooltip's width setting - it's hardcoded to 200px. This worked for me.

/deep/ .tooltip-inner {
max-width: none;
}

[exedor]

Thank you for the info. Unfortunately I can't get that to work either. I added your suggestion to the .css file of the component in which the tooltip appears. Sadly no change. It still looks the same.

[anandchakru]

ended up using the Modals

[karolisgrinkevicius]

Seems you're a crazy one.

[MoreOutput]

I have updated my code above to resolve some bugs found as I worked with the component. It does not have the above width issue -- see my css change. Control does have an ISO date inserted -- just a heads up.

[nomanbiniqbal]

1+

[andyhu92]

+1 Thanks in advance!

[digitaldrummerj]

@MoreOutput any chance you could create a sample project with a working example?

[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.

[lexith]

@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.