Custom Visual - To implement Date Range Picker

[Anonymous]

Hi,

I am making a custom visual with dropdown values like Today, Yesterday and Custom Dates. If I click custom dates, it should open a date range picker. I also followed other thread mentioned here. https://community.powerbi.com/t5/Developer/Date-Range-Custom-visual/td-p/296757

I am using jquery and date range picker from http://daterangepicker.com 

To Note:- Current pbiviz version installed - 3.0.12

My package.json libraries entry look like this:

 "@types/daterangepicker": "^2.1.17",
    "@types/jquery": "^2.0.41",
    "bootstrap": "^4.3.1",
    "d3": "^5.9.2",
    "daterangepicker": "^3.0.5",
    "jquery": "^3.2.1",

Even jQuery is working fine in my visual.ts file. For example, this code works like magic:

import * as $ from "jquery";

private $root: JQuery;
private $searchHeader: JQuery;

update() {
this.$root = $("#sandbox-host").addClass("custom-jquery");
      this.$root.append('<form id="mySearch"></form>');
      this.$searchHeader = $('#mySearch').append('<input name="datefilter" type="text" 
      value="01/01/2018 - 01/15/2018" class="form-control" />');
}

But, at this line, it gives me the error.

$('input[name="datefilter"]').daterangepicker({
        opens: 'left'
      }, function(start, end, label) {
        console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
      });

Error in console is - jquery__WEBPACK_IMPORTED_MODULE_124__(...).daterangepicker is not a function

@v-viig I have seen you tried similarly to fix other issues. I would be glad if I get some help here.

[andres777]

There are several 3rd party solutions to add Date Pickers and Date Range Pickers that can be added to Power BI as custom Viz.

We had many users pushing us (BI Analyts) to come up with a more professional solution that works well and looks good.

So I had to write my own custom Visual DatePicker (and go through the steep learning curve to learn all: Node Js, Ms Code, JavaScript, XML Parameters, Syncfusion parameters, Power BI compilation process, Sync calendars, etc) it took me around 2 months or more to come up with something end users would love and accept to use.

Since I didn't want to reinvent the wheel, I searched and searched all over to find some source code I could re-use inside Power BI environment. Because Power BI acts and works like a website,  I thought I should look for javascript components.  So I found and purchased the SyncFusion Essential JS 2 libraries, just to use one control, the datePicker, the other 59 controls are available for us to use at another time if we want...

A sample of how their calendar datepicker works in on their demo page... Link

Disclaimer : I don't work for SyncFusion or get paid by them to say these comments, I'm just a frustrated user that wanted a professional solution inside Power BI, which according to most users, should be out by now.

Clicking on a Day will select that date, clicking on "May 2020" will allow you to select the Month, and further down, clicking on the "2020" will allow you to select the Year. Very simple, elegant and professional.

picking a day ;

picking a Month

picking a Year :

pick a year

This is what mine looks inside Power BI...

Users click on the Calendar Icon, and I bring the bookmark Page that contains the 

DatePicker Control.  Allowing them to select ONE, single date.

(I removed some labels from the grid, to protect the inocent :)...)

Hope this helps some people...

Andres

[tarekmardessi]

hello @andres777 

You can please share the code source for this component

I need this please help

[Anonymous]

@v-viig Just an update.

https://github.com/microsoft/PowerBI-visuals/issues/543#issuecomment-490059785 

Based on the above line comment, it has to be used with window.jQuery or similar approach. I believe you have added jQueryInjector.js in the previous code.

Any idea how I can add that or similar workaround for pbiviz 3+ versions code.

[Anonymous · Accepted solution]

It's ok. The issue is now fixed. Seems like PBIVIZ doesn't support third-party jQuery libraries and its functionality with custom visual code.

A better approach is by using the Webpack configuration Webpack Configuration for Custom Visual.

For more information follow this Github thread.

Power BI Custom Visual - Date Range Picker