DatePicker: JS conflicts with SharePoint Online datepicker

[brannmar]

When including jquery.fabric.*.js it makes the out of the box datepicker nonfunctional.

When trying to open the datepicker by clicking on the icon you get the error above.

When removing the DatePicker plugin from the fabric js file the problem goes away. When looking through the sourcecode i see that some plugins does not have the fabric namespace. Maybe this is a problem?

Also we worked around the problem by using Jquery.NavBar.js. We only needed the NavBar plugin and nothing else in the bundled fabric file.

[mikewheaton]

Were you trying to use the DatePicker, NavBar, or both?

[brannmar]

Nope only NavBar. But i used the fabric bundle js file. When it is included it makes the default datepicker nonfunctional.

[mikewheaton]

Did you initialize the DatePicker like so:

    $(document).ready(function() {
      if ($.fn.DatePicker) {
        $('.ms-DatePicker').DatePicker();
      }
    }); 

I just created a working sample of it, and it seems to work fine for me.

[brannmar]

But as i said! I am not using the datepicker you are providing!

Maybe i have not been clear. I am developing on an sharepoint online environment and the datepicker provided by sharepoint online is not working when including your datepicker.

[mikewheaton]

I see, you're saying that the DatePicker in Fabric interferes with the SharePoint Online date picker? That's very strange. We'll have to see if we can get a page in SharePoint Online to test this on.

[brannmar]

Yes that is correct!

[StfBauer]

I don't like to be a show stopper but bringing Office UI to SharePoint currently doesn't actually make sense at all. The user experience is currently different now and most of the styles are redeveloped with other style sheet classes. SharePoint on the other hand currently provides well working controls that can be used. What we have seen this week are some great improvements toward Office UI Fabric in case of the new view of document libraries in SharePoint. Where some fimiliary components show up directly in SharePoint. From a development perspective I would suggest to use Office UI Fabric only for Office Add-ins and Provider Hosted Add-ins, such. Things that currently don't have any kind of Office like UI and don't interfere with the current user experience in SharePoint.

I think fixing bugs like these are only time consuming at the moment and there are things that might are more important. As I said previously. I don't like to be a show stopper but the usage scenarious for now should be tightened a bit and a focusing on the core functionalities for Office Add-ins and standalone SharePoint Add-ins should be done for now. It is the same with SharePoint and Bootstrap. Just because I can doesn't always make sense from an architectural perspective.

I really appreachiate the work you do :+1: I think usage scenarios on when to use Office UI Fabric will give people a good guidance!!!

[ChrispyBites]

Just want to chime in here by saying that this issue doesn't just exist in SharePoint Online. It's also affecting on-prem implementations. In 2013, at least.

So, all due respect, Stefan, but "bringing Office UI to SharePoint doesn't actually make sense at all" can't be the official line, man. The party line on Office UI Fabric has been that it's a framework to make our custom development look and feel like Office applications. All Office applications. That includes SharePoint. We've bought into that party line. I like the framework. I want to use the framework to make custom applications.

So, no, I would consider this a big time, definitely in need of fixing bug. Using the excuse that "SharePoint... provides well working controls" to not fix something big like this is... lame. And, come on, that isn't even necessarily true. Anyone doing any kind of custom development on SP knows that there are huge, gaping functional holes in SharePoint that Microsoft has traditionally been happy to allow 3rd parties to fill.

[alistair-crawford]

I have encountered exactly the same problem on Sharepoint 2016.

[chakkaradeep]

@brannmar can you provide more information on how and where you are using the DatePicker in SharePoint? To be specific, you are getting this error as soon you include the Fabric Components DatePicker JS code as available here? This will help us identify where the issue is and see how we address it.

On Office UI Fabric and SharePoint: Office UI Fabric components are independent to the current SharePoint server-side controls and it gets problematic when you use jQuery as you can get into conflicts. Right now we do not recommend using Office UI Fabric components alongside SharePoint controls for that very reason. FAQ for developers can be found here.

That said, we have invested in enabling Office UI Fabric be a key UX component in the modern SharePoint experience and the SharePoint Framework, so developers get out of of the box Fabric styles, themes and components.

[alistair-crawford]

If we include jquery.fabric.min.js (note not just the components file) as a JsLink in our 2016 environment, the Date Time Picker ceases to function. We invested heavily in Fabric UI for our new portal (over Bootstrap) because we wrongly thought the entire Fabric UI framework for SharePoint would be compatible with SharePoint 2016 (given it is your latest iteration of on-prem SharePoint). Right now we have to seriously weigh up whether it is worth ripping out Fabric UI and going back to Bootstrap if your standard JavaScript files corrupt your SharePoint 2016 controls.

[chakkaradeep]

@alistair-crawford we are happy to help if you are able to provide us more information on the conflict - may be the errors you get in the developer tools could be helpful.

If I am right, you are not having issues with the Office UI Fabric CSS styles and typography. It is when you start including components with jQuery implementation, right? Styles and typography do not require jQuery. Have you tried using jQuery.noConflict() to see if the issue is with jQuery conflicts? Here is a stackexchange post discussing how to load jQuery in JSLink.

Once you provide more information, we can look into if the issue with jQuery could be at the Office UI Fabric component jQuery level or at the SP level.

[brannmar]

@chakkaradeep, I dont know if the issue still persists. We removed all UI-Fabric from our Sharepoint Online solution. But if you look at the first post i posted. It has the error message the console gives you.

[Joemurai]

Hi, I understand that you don't want to invest time in ensuring compatibility with 3rd party libraries but to build an Office 365 framework and not check its compatible with SharePoint is a joke. If you include the jquery.fabric.js file in a SharePoint site it breaks all the OOB date pickers. Then I notice a line on the fabric site that say's you don't recommend using the component js that you include in the fabric download zip. I can see why. Even the fabric sample site has had a number of bugs. I made the mistake of investing time in the framework but I've concluded that it is amateurish, buggy and poorly maintained. Its beta at best.

[ChrispyBites]

@Joemurai, well, they indicate on the Releases page that it's in Beta. Also, this is a pretty solid framework, in spite of being in beta. I believe in it, I like it, it helps developers like me make things look good without a whole lot of effort.

What's sort of beyond the pale, from my perspective, is that Fabric is obviously the chosen framework for Office applications. It looks like SharePoint (including 2013), it should work with SharePoint.

And I can confirm that this issue is still occurring, even in the newest beta release. As far as I'm concerned, the only context that's really necessary is the screenshot at the top of this discussion.

[mikewheaton]

This issue was moved to OfficeDev/office-ui-fabric-js#64