make its size small and close by itself

[RakhiS]

Hi, 

I want to close the datetime picker to get close by itself without clicking on apply button.

also, want to small its size and to always get open on up side

please help

[UdhayaKumar Duraisamy]

Query 1: I want to close the datetime picker to get close by itself without clicking on apply button.

 

You can use the select event to check whether the user has selected endDate or not. If the user has selected endDate, you can programmatically click the Apply button, which will trigger the popup to close. Please refer to the code snippet below for more information.

 

<ejs-daterangepicker

      #drp

      (select)="Onselect($event)"

      (open)="OpenHandler($event)"

      cssClass="e-small"

    ></ejs-daterangepicker>

  Onselect(args) {

    if (args.endDate != null) {

      setTimeout(function () {

        (document.querySelector('.e-apply.e-btn.e-control') as any).click();

      }, 10);

    }

  }

 

Documentation (select event) : https://ej2.syncfusion.com/angular/documentation/api/daterangepicker/#select

 

Query 2: also, want to small its size

 

You can use the cssClass property as 'e-small', which will make the component size small.

 

<ejs-daterangepicker

      #drp

      (select)="Onselect($event)"

      (open)="OpenHandler($event)"

      cssClass="e-small"

    ></ejs-daterangepicker>

Query 3: to always get open on up side

 

We would like to inform you that our EJ2 DateRangePicker popup will be opened under the input component. If there is not enough space to show the popup, it will be displayed at the top of the input element. This is the default behavior of the popup component.

 

If you wish to alter the position of the popup, you may utilize the open event of the DateRangePicker component as illustrated below. In the open event, you can designate the X & Y popup position as 'left' & ‘top’ and assign a numerical value to offsetX and offsetY position to correctly position the DateRangePicker popup according to your needs.

Please refer to the below sample for reference.

 

<ejs-daterangepicker

      #drp

      (select)="Onselect($event)"

      (open)="OpenHandler($event)"

      cssClass="e-small"

    ></ejs-daterangepicker>

  public OpenHandler(args): void {

    args.popup.position = { X: 'left',Y: "top" }; // changing popup postion

    args.popup.offsetX = -250; // changing the popup position with set any number value

    args.popup.offsetY=-400;   

  }

 

Documentation (open event) : https://ej2.syncfusion.com/angular/documentation/api/daterangepicker#open

 

Sample Link : https://stackblitz.com/edit/angular-nqihc8?file=src%2Fapp.component.html,src%2Fapp.component.ts