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

  • 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?

    Monday, August 31, 2020 8:15 PM

All replies

  • 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

    Tuesday, September 1, 2020 8:45 AM
  • 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!

    Tuesday, September 1, 2020 1:41 PM
  • User-474980206 posted

    Actually Material-UI is for react, not angular.

    a popular material css for bootstrap


    A popular material css library is materialize


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


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

    Tuesday, September 1, 2020 3:21 PM