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?
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
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!
Member
9 Points
65 Posts
How to add a material style datepicker to .net MVC project?
Aug 31, 2020 08:15 PM|MarcusAtMars|LINK
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?
Contributor
2110 Points
674 Posts
Re: How to add a material style datepicker to .net MVC project?
Sep 01, 2020 08:45 AM|XuDong Peng|LINK
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
Member
9 Points
65 Posts
Re: How to add a material style datepicker to .net MVC project?
Sep 01, 2020 01:41 PM|MarcusAtMars|LINK
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!
All-Star
58254 Points
15674 Posts
Re: How to add a material style datepicker to .net MVC project?
Sep 01, 2020 03:21 PM|bruce (sqlwork.com)|LINK
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