Date Range Custom visual

[chotu27]

Hi All,

i am building date range visual as similar to the one which we have in power bi. Can anyone help me where can i find the source code for Date visual Slicer. Can i also know how the slicer in power bi accepting date visual and showing it's range?

Power bi date rangeOutput Expecting

[tarekmardessi]

Hello, i downloaed the source code but does not working....i need this component if you have please 

[Robbief]

I need this in my life......   Will it be a free visual?

[v-chuncz-msft]

@chotu27,

Check this post and take a look at https://github.com/Microsoft/PowerBI-Visuals/#building-a-slicer-visual.

[chotu27]

@v-chuncz-msft 

   Hey I know about this post and sample slicer code .But i need to know how the date display is working in slicer visual when we put date field in to it?

@v-viig   Can you please help me on this above discussion ? 

[v-viig]

Source code of native Slicer isn't public anymore.

Slicer accepts dates as an array of dates. Slicer applies a filter once user selects any range.

After that, Power BI filters data for all of visuals on the same report page.

Please let me know if you any extra questions.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[chotu27]

Hi Ignat,

Thank you for the reply, Can i know what npm packages are used for Date Range?

[v-viig]

You can use powerbi-visuals-tools and powerbi-models to create a date range slicer.

Please also take a look at powerbi-visuals-sampleslicer that describes how to make a slicer as a custom visual.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[chotu27]

Hi Ignat 

I am trying to include the date range calender using an external JS framework called daterangepicker. I have included its scripts and typing scripts from external sources. But I am not able to invoke the functions in the framework as provided in its specifications.

Could you please help me with how to invoke it or help me with an idea which would pop a calender on the custom visual on click on an element within the box. Attached are the snippets of what m trying to include. 

//sampleslicer.ts
$('input[name="datefilter"]').daterangepicker({
                      autoUpdateInput: false,
                      locale: {
                          cancelLabel: 'Clear'
                      }
                  });
                
                  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
                      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                  });
                
                  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
                      $(this).val('');
                  });
//tsconifg.json

 "files": [
    "node_modules/@types/daterangepicker/index.d.ts",
    "node_modules/@types/jquery/index.d.ts",
    "node_modules/@types/jqueryui/index.d.ts"
]

//package.json

 "externalJS": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/nouislider/distribute/nouislider.js",
    "node_modules/moment/moment.js",
    "node_modules/d3/d3.min.js",
    "node_modules/daterangepicker/daterangepicker.js"
]

What i need here is an idea to implement a calender with custom functionalities in my visual. Could you help with an idea to do that ? Thanks alot for your patience

[v-viig]

Could you please share the full code of your custom visual?

I'd like to debug it.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[chotu27]

@v-viig

Hi Ignat,

can you check my full code sent in private message  .

[v-viig]

You can take a look at working example here.

Please note that the issue was related not to installing jQuery and Datepicker libraries.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Anonymous]

@v-viig @chotu27 I downloaded this code and looking forward to implementing in the same way as my business requirement is like this. I am running the code and it is compiling successfully but in console, it is giving me an error, jquery__WEBPACK_IMPORTED_MODULE_124__(...).daterangepicker is not a function. In details view -------------Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_124__(...).daterangepicker is not a function
at HTMLDocument.<anonymous> (<anonymous>:30954:65)
at might throw (<anonymous>:17494:36)
at process (<anonymous>:17536:19)   . 

Any idea how to fix this error. I didn't change package.json versions of any library. Globally installed pbiviz 3.0.12.

@chotu27 Did you face a similar issue? 

[chotu27]

Hi @v-viig

I saw the working example and calendar is displaying but  the date selection is not working like selectionID and filtering .Inorder to  achieve it , do I need to create Selection manager for this date Visual? If so can i get any sample codes

[v-viig]

You should use Advanced Filter API (sample visual).

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[chotu27]

Hi  Ignat,

@v-viig

I tired it in several ways to implement single date picker  selectionID's in calendar but none of them are working. I  need Single Date calendar Picker visual in my project it's very important for me , Can you tell me where can i get the single date selection Visual or else just create sample selection iD in calendar then i will go ahead with it.

@please help me

I can select single date In "This" option avilable in relative date slicer but it will be very hard for the users to select this option and look at.

[v-viig]

Hello @chotu27

I'm not sure that understand the requirement well.

Do you need a single input box that opens the calendar? Is that correct?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[chotu27]

Hi Ignat @v-viig

Thanks for the response yes i need single input box in which it should be only able to select single date from the calendar . 

Note : It's Not about the range selection

[v-viig]

Hello @chotu27

You might take a look at the sample date picker here.

I suppose that the sample code will meet your requirements.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[tarekmardessi]

Hello @v-viig

i am new in power bi, i need component date with range, can you share the source code

like this component 

@help please

[Robbief]

I was hoping that almost after 5 years there would be some better options on this point.......  wow...  still the same bog standard one.