Add custom button to set date picker date to a specific date

[Mohammad Hadadi]

Hi there,

I am using date-picker (ejs-datepicker) component and want to remove the "Today" button and add a new custom button that when user click on it, component value reset to a specific date. I know we can remove the "Today" button using [showTodayButton]="false", but haven't been able to add the custom button to the component although I tried different codes from Syncfusion like adding a clear button to calendar component.

I appreciate if you show a way to do so.

Thank you,

Mohammad.

[Sevvandhi Nagulan]

Hi Mohammad, 

Greetings from Syncfusion support. 

We added the custom button to the popup element using the open event arguments. Refer to the following code and sample. 

[app.component.html] 

 <ejs-datepicker #sample [showTodayButton]="false" (open)='onOpen($event)'></ejs-datepicker> 

[app.component.ts] 

    onOpen(e){ 

      var buttonElement = document.createElement('button'); 

      buttonElement.innerText = 'Custom button'; 

      buttonElement.className = 'e-btn'; 

      buttonElement.addEventListener('click', () => { 

        this.dateObj.value = new Date('05-09-2020'); 

      }); 

      e.popup.element.appendChild(buttonElement); 

    } 

Please find the sample below, 

Sample link: https://stackblitz.com/edit/angular-ny55ht-q4ev1y?file=app.component.ts 

Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 

Sevvandhi N 

[Mohammad Hadadi]

Hi Sevvandhi,

Thanks for you quick and great replay. 

I tried the code and it works as I need. However, there is an issue. When the data picker opens, the custom button is added and it work exactly as I want but I do not know why the footer of the data picker is transparent. I use the data picker component inside an angular grid component and when I click "Add" button on toolbar I need to show and select a date using the data picker component for data grid row. I attached a screen shot and as you can see footer is transparent. The new button is "First" button and text that is on the left and right side of the button is a data from a row in ejs-grid.

I appreciate if you show a solution to resolve this issue.

Thank you,

Mohammad.

  

[Sevvandhi Nagulan]

Hi Mohammad, 

In our end we can reproduce the reported issue. We suggest that you add the button to the popup element using the code below to solve the reported issue. Refer to the following code and sample. 

onOpen(e){ 

  var buttonElement = document.createElement('button'); 

  buttonElement.innerText = 'Custom button'; 

  buttonElement.className = 'e-btn'; 

  buttonElement.addEventListener('click', () => { 

    this.dateObj.value = new Date('05-09-2020'); 

  }); 

  e.popup.element.firstElementChild.appendChild(buttonElement); 

} 

Please find the sample below, 

Sample link: https://stackblitz.com/edit/angular-ny55ht-gtxyz8?file=app.component.ts 

Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 

Sevvandhi N 

[Mohammad Hadadi]

Hi Sevvandhi,

Thanks for your quick reply.

Your answer works and it is exactly what I am looking for.

Thank you again,

Mohammad

[Sevvandhi Nagulan]

Hi Mohammad, 

We are glad to hear that our solution got worked. Please get back to us if you have any queries. 

Regards, 

Sevvandhi N