Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Date Time picker for Django Web app

I currently am working on a Learning Management System project using Django for its back end. I realized that I need a way to have the dates on the calendar be clickable when I want to create a new event. Besides that I also need a way for a Date Time picker instead of writing it inside a form. But what would be a good approach for this, should I use something like javascript for this? I know a little bit of javascript. Some suggestions or ideas would be nice. Thank you!

1 Answer

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,736 Points

I think it's best to think of this problem as being a front end problem and independent of Django. Your Django backend can serve up the static files for the front end. And your front end can post data from the forms and date pickers back to your Django backend. But how the front end takes care of the date time picker is really outside of the scope of Django.

Date pickers are hard. You can use the default inputs that come with html. (There's <input type="date">, <input type="time"> or <input type="datetime-local">). But they're kind of ugly and clunky.

Front end JavaScript and CSS frameworks can help you a lot with this, letting you use a component that's already been built by someone else. But they have a learning curve, and there's a lot of options, so I hope this doesn't overwhelm you. On the CSS side, there's Bootstrap, Material Design, Foundation, Semantic UI. On the JavaScript side, there's jQuery, React, Angular.

There are lots of date pickers in all sorts of combinations of these frameworks. There are a bunch of different Bootstrap jQuery date pickers built by different people. There's this Angular Material built by Google. (Another strategy could be to use a web component which will let you use something prebuilt but outside of a framework).

Sorry if that's too much information.