How to Integrate DatePicker into Power BI Application in JavaScript?

This article explains how to use Syncfusion DatePicker component as the custom visual in Microsoft Power BI.

Pre-requisites

Make sure that you have the compatible versions of Power BI in your machine and verify that you are logged in to Power BI account before starting to work on this project.
If you do notn’t have an account, please create a new one by referring to this link. Create a Power BI account

• Node.js (latest version)
• Power BI Application
• Windows PowerShell (Version 4 or more)
• Visual Studio Code for editor

Introduction

Visuals are normally described as the pictorial representation of your data. You can visualize your data in the form of visuals. Power BI allows you to create visuals of your own and import those visuals in the application. You can refer to Adding custom visuals in Power BI how to add the custom visual in to the Power BI application. through this link. Adding custom visuals in Power BI.

Dependencies

Before starting with this project, DatePicker requires to add the Syncfusion ej2-calendars package from npmjs, which are distributed in npm as @syncfusion scoped packages.

Creating cCustom vVisual

To create a new custom visual using Power Bi, follow the given steps:.

npm i -g powerbi-visuals-tools

1. Install pbiviz using the following command in Windows PowerShell.
   
   
2. Now, create and install certificate using the following command.

   Pbiviz --install - cert
   

Follow the steps given in the below link, to install the created certificate. How to install the certificate

pbiviz new <Project Name>cd <Project Name>

3. Now, create a new custom visual project using the followingbelow command.
   
   

   npm install @syncfusion/ej2-calendars --save
   

4. Install the ej2-calendars package through npm install command.
   
   
   

   import { DatePicker } from '@syncfusion/ej2-calendars';export class Visual implements IVisual {
          constructor(options: VisualConstructorOptions) {
    
               this.target = options.element;
               if (typeof document !== "undefined") {
                   // Create a new input element
                   const new_d1: HTMLElement = document.createElement("input");
                   new_d1p.setAttribute("id", "calendar");
                   this.target.appendChild(new_d1p);
               }
               // Append the created input element to EJ2-Datepicker
               let datepicker: DatePicker = new DatePicker();
               datepicker.appendTo('#calendardatepicker');
    
           }
       }
   

5. Open the project in Visual Studio Code editor. Import the DatePicker module and render the Datepicker in visual.ts file.
   [visual.ts]
   
   
   
   
   
   
   

   @import (less) "../node_modules/@syncfusion/ej2-base/styles/material.css";@import (less) "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; 
   @import (less) "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
   @import (less) "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
   @import (less) "../node_modules/@syncfusion/ej2-popups/styles/material.css";
   

6. Import the necessary CSS files in your “visual.less” to load the DatePicker component styles.
   [visual.less]
   
   
   
7. Run the project by executing the following command.

   pbiviz start
   

To learnknow more about Angular DatePicker component, please refer to this UG documentation, API Reference, and Samples.

Conclusion

I hope you enjoyed learning about how to Integrate DatePicker into Power BI Application in JavaScript.

You can refer to our JavaScript DatePicker feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript DatePicker example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!