Skip to content

Instantly share code, notes, and snippets.

@miguelgrinberg
Created July 13, 2017 11:46
Show Gist options
  • Save miguelgrinberg/5a1b3749dbe1bb254ff7a41e59cf04c9 to your computer and use it in GitHub Desktop.
Save miguelgrinberg/5a1b3749dbe1bb254ff7a41e59cf04c9 to your computer and use it in GitHub Desktop.
datetimepicker-example
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_wtf import Form
from wtforms.fields import DateField
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'
Bootstrap(app)
class MyForm(Form):
date = DateField(id='datepick')
@app.route('/')
def index():
form = MyForm()
return render_template('index.html', form=form)
{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}This is an example page{% endblock %}
{% block head %}
{{ super() }}
<link type="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
{% endblock %}
{% block content %}
<div class="container">
<h1>Hello, Bootstrap</h1>
<div class="row">
<div class='col-sm-6'>
{{ wtf.quick_form(form) }}
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datepick').datetimepicker();
});
</script>
{% endblock %}
@realJustinLee
Copy link

realJustinLee commented Sep 15, 2024

Well, simply use DateTimeLocalField would solve all these sufferings.

Sample Here

from flask_wtf import FlaskForm
from wtforms.fields import StringField, TextAreaField, SubmitField, DateTimeLocalField
from wtforms.validators import DataRequired, Optional


class PasteForm(FlaskForm):
    title = StringField('Title here')
    body = TextAreaField('Just paste', validators=[DataRequired()])
    expiry = DateTimeLocalField('Expiry date', validators=[Optional()])
    submit = SubmitField('Submit')

And the HTML is quite simple, No JS needed except basic BootStrap

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment