{% extends 'base.html' %} {% import 'bootstrap/wtf.html' as wtf %} {% block head %} {{ super() }} <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/bootstrap-datetimepicker.min.css') }}"> {% endblock %} {% block app_content %} <h1>Create a new game</h1> <div class="col-md-4 col-sm-6 col-xs-8"> <hr> <form action="" method="post" class="form" role="form"> {{ form.hidden_tag() }} {{ form.timezone }} {{ wtf.form_field(form.game_name, class='form-control') }} {{ form.start_time.label }} <div class="form-group row"> <div class="col-sm-7"> {{ form.start_time }} </div> <div class="col-sm-5 align-self-center"> {{ wtf.form_field(form.start_time_disabled, class='form-control') }} </div> </div> {{ form.end_time.label }} <div class="form-group row"> <div class="col-sm-7"> {{ form.end_time }} </div> <div class="col-sm-5 align-self-center"> {{ wtf.form_field(form.end_time_disabled, class='form-control') }} </div> </div> {{ wtf.form_field(form.submit, class='btn btn-primary') }} </form> <hr> </div> {% endblock %} {% block scripts %} {{ super() }} <!-- TODO: Scripts downloaden naar repo? --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> <script type="text/javascript" src="https://momentjs.com/downloads/moment-timezone-with-data.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 () { var date = new Date() $('#datetimepicker_start').datetimepicker({ //useCurrent: false, //Important! See issue #1075 locale: 'en-gb', format: 'DD-MM-YYYY HH:mm', keepInvalid: true, sideBySide: true, defaultDate: date, timeZone: moment.tz.guess() }); date.setDate(date.getDate() + 1) $('#datetimepicker_end').datetimepicker({ //useCurrent: false, //Important! See issue #1075 locale: 'en-gb', format: 'DD-MM-YYYY HH:mm', keepInvalid: true, sideBySide: true, defaultDate: date, timeZone: moment.tz.guess() }); $("#datetimepicker_start").on("dp.change", function (e) { $('#datetimepicker_end').data("DateTimePicker").minDate(e.date); }); $("#datetimepicker_end").on("dp.change", function (e) { $('#datetimepicker_start').data("DateTimePicker").maxDate(e.date); }); $("#start_time_disabled").change(function() { updateDateTimePicker('#datetimepicker_start', '#start_time_disabled') }); $("#end_time_disabled").change(function() { updateDateTimePicker('#datetimepicker_end', '#end_time_disabled') }); function updateDateTimePicker(picker, checkbox){ if ($(checkbox).prop("checked")) { $(picker).data("DateTimePicker").disable(); } else { $(picker).data("DateTimePicker").enable(); } } updateDateTimePicker('#datetimepicker_start', '#start_time_disabled'); updateDateTimePicker('#datetimepicker_end', '#end_time_disabled'); $('#timezone')[0].value = moment.tz.guess(); }); </script> {% endblock %}