django模板中的bootstrap-datetimepicker,未插入Input字段的选定日期

时间:2017-05-31 14:44:37

标签: javascript jquery css django twitter-bootstrap

<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog"
     aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">×</span><span class="sr-only">Close</span>
                </button>
                <h3 class="modal-title" id="lineModalLabel">Schedule
                    Message</h3>
            </div>
            <div class="modal-body">

                <!-- content goes here -->
                <form>
                    <div class="form-group">
                        <label for="dtp_schedule" class="col-md-2 control-
                 label">Publish on :</label>
                        <div class="input-group date form_datetime col-md-5" data-
                             date-format="yyyy-mm-dd hh:ii:ss" data-link-
                             field="dtp_schedule">
                            <input class="form-control" size="16" type="text"
                                   value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon
                     glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon
                    glyphicon-th"></span></span>
                            <input type="hidden" id="dt_now" value="{% now 'Y-m-d
                    H:i' %}">
                        </div>

                    </div>
                    <div class="form-group">
                <span id="txt_error_schedule" class="alert alert-danger
                hide text-center col-md-12 col-xs-12">Please select a
                 date.</span>
                    </div>
                </form>

enter image description here

使用数据贴图的模态体内的表单。当弹出日期选择器窗口时,所选的日期时间不会插入到字段中,并且只要&#34;计划&#34;单击按钮显示请选择日期错误

datetimepicker的代码:

$('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        startDate: $('#dt_now').val(),
    });

按钮id函数的代码,它被调用提交日期

$('#btnSchedule').on('click', function(){

        if ($('#dtp_schedule').val() === ''){
            $('#txt_error_schedule').removeClass('hide');
            return ;
        }else{
            $('#txt_error_schedule').addClass('hide');
            $(this).addClass('disabled');
            var devices = getSelectedDevices();
            var data = $('#gcmForm').serialize()+'&'+$.param({ 'device_ids': devices });
                $.post("request/schedule/", data, function (response) {
                    window.location.href = '';
                }).fail(function() {
                      $('#btnSchedule').toggleClass('disabled');
                    alert( "error" );
                  });
        }
   });

CSS订单 - &gt;

{% block bootstrap-css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'dashboard/libs/jquery/bootstrap/dist/css/bootstrap.css' %}" type="text/css"/>
{% endblock %}

{% block extrastyle %}

<link rel="stylesheet" href="{% static 'dashboard/css/font.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'dashboard/css/bootstrap-datetimepicker.min.css' %}" type="text/css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
   integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
   crossorigin=""/>
    <link rel="stylesheet" href="{% static 'dashboard/css/app.css' %}" type="text/css"/>
    <link rel="stylesheet" href="{% static 'dashboard/css/autocomplete.css' %}" type="text/css"/>
    <link rel="stylesheet" href="{% static 'dashboard/css/custom.css' %}" type="text/css"/>
{% endblock %}

0 个答案:

没有答案