How to add a material style datepicker to .net MVC project?

Question

User-462241089 posted

Does anybody know how to properly add a material design datepicker to a .Net MVC project?  

In Angular apps, you have the option to choose between different styles of datepickers out of the box. Unfortunately, .NET doesn't have that feature. Other common libraries like Bootstrap, which we are using, don't include styles for datepickers either.

There is a library called MaterialDesignBootstrap that has a great material styled datepicker, but we are trying to avoid it because it is not well maintained and updates infrequently.

The best solution I could find was materializecss' datepicker, but it has several quirks, isn't well updated, and is really just a stylesheet and some javascript that is copied into our project and feels like plagiarism. I am using this one now, but I would like to use something else or make my own. Is there a tutorial on building a datepicker natively or is this sort of a dumb question?

Answer 1

User-939850651 posted

Hi MarcusAtMars,

As you said, these date pickers are just the result of some style sheets and JavaScript.

So if you need to build a date picker, first you need to understand the application of date objects and their functions in JavaScript.

I found an article about how to create a simple date picker, you could refer to it if you need.

Build a Date Picker in 15mins Using Javascript/React from Scratch

Best regards,

Xudong Peng

Answer 2

User-462241089 posted

Thanks, XuDong Peng! So this is tutorial is intended to be used with reactjs, but my app is .net core mvc. Did you mean to just use this as a reference and to understand the core concepts?

Also, is there a way to just style the .net datepicker? I have heard that there exists an NPM package that provides material styled datepickers for .net applications, but there are over 22k results when I search on the NPM site, so if anyone know what it is, please let me know!

Answer 3

User-474980206 posted

Actually Material-UI is for react, not angular.

a popular material css for bootstrap

   https://mdbootstrap.com

A popular material css library is materialize

   https://materializecss.com

And googles version (but it requires a 3rd party date picker)

   https://getmdl.io/started/index.html

note: there is no .net date picker. You need to pick a 3rd party. If using the default  bootstrap template, then typically bootstrap-datepicker