Datepicker with inputControl

[jkumawat]

Hello Guys,

I have looked at the library and used date-picker from ng2-bootstap but unfortunately i want to show date-picker on input click only and hide it after selection.

I have gone through documentation but didn't find any example to use it with Input control.

Any guidance or tips on this??

Issue: On Setting showWeeks to false -- not triggering visibility. Weeks are always visible.

[madhav5589]

Would like to have the same feature.

[midnightriot]

This would be great to have. There is a datepicker-popup directive, (version 1.0.2-beta.1)but I can't get it to work and there isn't any documentation for it.

[project707]

+1 The popup method is the only really useful format for many apps that don't have a ton of space or aren't centered around the datepicker itself in some way. Generally all you have room for is a date field, but you need the picker for ease of use, consistency, formatting, etc..

[zcsongor]

+1

[leonhardt]

+1

[sanjayjha]

I am also looking for popup datepicker on input click. I saw at some place it is not yet implemented. Any specific date for implementation?

[valorkin]

this is one to one with #273 closing this one

[sanjayjha]

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

[valorkin]

@sanjayjha I just closed duplicated issues

[sanjayjha]

Thanks, do we have a tentative date for this feature?

[sanjayjha]

I used ng2-datepicker but have following issues:

popup component not getting located relatively, Always shows current date though date value is past date not able to change date format to mm/dd/yyyy.

[kemmis]

bump.

I too would use this if it was a popup and not inline.

[valorkin]

join slack to follow up updates: https://www.hamsterpad.com/chat/ng2

[somzJosf]

Try this. <input type="text" [ngModel]="dt" (focus)="showDatePicker = true"> <div *ngIf="showDatePicker" style="position: absolute; z-index:10; min-height:290px;"> <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker> </div>

[vishalgajjar]

Guys, I tried this and I am able to get the datepicker on calendar icon clock

`

<input type="text" class="form-control input-sm" name="inputBeginDate" [(ngModel)]="effectiveBeginDate" />

` CSS: `datepicker{ position: absolute; z-index: 1001; } datepicker .btn{ padding: 5px !important; padding-left: 10px !important; padding-right: 10px !important; } datepicker .btn .text-muted{ line-height: inherit !important;} datepicker .well {border: 3px solid #2b669a !important;}` only issue is that I don't know how the get "MM/dd/yyyy" date format. if anyone knows then let me know please .

[VirendraWankhede]

Is there any way to auto correct date for input field using ng2 date picker ?

[sanjaygohil]

Use pipe in Textbox for date Format. its work for me. like this value="{{date | date:'MM/dd/yy'}}" <input type="text" class="form-control " name="inputBeginDate" value="{{date | date:'MM/dd/yy'}}" />

BUT I have problem in datepicker popup closed when user click on navigation arrow and also in month header i used this code

<div class="input-group" dropdown dropdown-append-to-body>
                <input type="text" class="form-control " name="inputBeginDate" value="{{date | date:'MM/dd/yy'}}"  />
                <span class="input-group-addon" dropdownToggle><i class="fa fa-calendar"></i></span>
                <div class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
                    <datepicker name="test" [showWeeks]="false"  [(ngModel)]="date" ></datepicker>
                </div>
            </div>

Please let me know if anyone know about this issue. Thanks

[alanhe421]

+1

[ghost]

Any update on popup thing?? Are you able to achieve?

[razorcd]

+1

[gokhancelik]

+1

[sergeushenecz]

Any update on popup thing?? Are you able to achieve?

[arnoldjair]

+1

[joncaris]

+1

[GoldenTao]

I've got this working with the autoClose input. [autoClose]="'outsideClick'" I think that is the best you can do at this stage.

In your example...

<div class="input-group" dropdown dropdown-append-to-body [autoClose]="'outsideClick'">
    <input type="text" class="form-control " name="inputBeginDate" value="{{date | date:'MM/dd/yy'}}"  />
    <span class="input-group-addon" dropdownToggle><i class="fa fa-calendar"></i></span>
    <div class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
        <datepicker name="test" [showWeeks]="false"  [(ngModel)]="date" ></datepicker>
    </div>
</div>

[Vnuuk]

@sanjaygohil you solution is great!

[aamir-munir]

[autoClose]="'outsideClick'" not working for me it close it whenever working on the datetime control. any suggestion please?

[rrohitesh]

i am facing a issue in customizing the ng2-datepicker past dates back-ground color. As i see in the .css only current and selected dates selectors is there. There is no .css selector for the past dates. Does anybody know how we can change the color of background for past dates.

[VirendraWankhede]

Hi, You can disable the past date according to your date object date. It automatically change your past date colour. Thanking you On 21-Feb-2017 3:22 pm, "rrohitesh" notifications@github.com wrote:

i am facing a issue in customizing the ng2-datepicker past dates back-ground color. As i see in the .css only current and selected dates selectors is there. There is no .css selector for the past dates. Does anybody know how we can change the color of background for past dates.

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

[rrohitesh]

I'm not getting how or which property should I use for this .If I'm trying to access date:DataModel I'm getting day, formatted, momentObj,month and year only I'm not able to find out by using this how we can get the color style for past dates

[msms007]

@sanjaygohil you solution is great! however, clicking on the month navigation buttons close the popup.

[tatokhorava]

Hi all. If you use closing function on outside click and your popup keeps closing when you click month or year, thats because in outside click directive you probably making check like this this._elementRef.nativeElement.contains(targetElement) - and problem here is that that when this event is triggered that element is already removed from dom, as the view of popup changes so, you should write something like this: const clickedInside = this._elementRef.nativeElement.contains(targetElement) || !document.contains(targetElement); - its not perfect solution but it will work :)

[JoseRCayetano]

@tatokhorava could you write a sample code?plase

[tatokhorava]

@JoseRCayetano I can copy my code, I think you will find it useful :) first of all I've implemented the clickOutside directive, I made some correction there, here it is: ` import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({ selector: '[clickOutside]' }) export class ClickOutsideDirective { constructor(private _elementRef: ElementRef) { }

@Output()
public clickOutside = new EventEmitter();

@HostListener('document:click', ['$event.target'])
public onClick(targetElement:any) {
    const clickedInside = this._elementRef.nativeElement.contains(targetElement) || !document.contains(targetElement);
    if (!clickedInside) {
        this.clickOutside.emit(null);
    }
}

} `

then you have to use it in your html something like this: `<div class="form-group " style="position:relative; width:150px; margin-left:20px; float:left;" (clickOutside)="returnDate.hidden = (returnDate.hidden ? returnDate.hidden : true)">

{{ 'COMMON.DateTo' | translate:param }}

                <div class="row">
                    <div class="input-group col-sm-12" style="width: 150px;">
                        <input style="" class="form-control" name="dpInputReturnDate" placeholder="To Date" type="text" value="{{priceFilterToDate | date:'dd.MM.yyyy'}}" readonly>
                        <span class="input-group-addon glyphicon-calendar glyphicon" style="cursor:pointer; top:0;" (click)="returnDate.hidden = !returnDate.hidden"></span>
                        <div class="datePickerBoxNg2-bootstrap" [hidden]="true" #returnDate>
                            <datepicker [(ngModel)]="priceFilterToDate" [minDate]="minDate" [showWeeks]="true" name="dpreturnDate" (selectionDone)="returnDate.hidden = true"></datepicker>
                        </div>
                    </div>
                </div>
            </div>

`

[pegaltier]

Here is plunker : https://embed.plnkr.co/2Z8ntAMAWI5vZVN08tIe/

[jacob-duong]

Hi all, it's work for me:

templete.html <div class="col-md-9" #datepickerE> <input type="text" class="form-control" (focus)="isShowDatepicker = true"> <div class="popover-datepicker" *ngIf="isShowDatepicker"> <datepicker formControlName="shippingDate" [minDate]="currentDate" [showWeeks]="true" [dateDisabled]="dateDisabled" (selectionDone)="isShowDatepicker = false"></datepicker> </div>

component.ts

@Component({ selector: 'my-form', host: { '(document:click)': 'onClick($event)', }, templateUrl: './templete.html', }) export class MaterialForm implements OnInit { @ViewChild("datepickerE") datepickerE: ElementRef; public isShowDatepicker: boolean = false;

onClick(event) { if (!this.datepickerE.nativeElement.contains(event.target)) { this.isShowDatepicker = false; } } }