应用

1.首先 html页面中引入datetimepicker的js,css文件,

可以从网站上下载datetimepicker

2.html标签

<input type="text" name="" id="datetimepicker" class="form_datetime" data-link-format="yyyy-mm-dd" data-date-format="yyyy-mm-dd">

3.js初始化

$('#datetimepicker').datetimepicker({
minView: "month",
format: "yyyy-mm-dd",
autoclose: true,
todayBtn: true
});

{% extends 'base.html' %}
{% block title %}表格{% endblock %}

{% block main %}
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-datetimepicker.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-datetimepicker.zh-CN.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap-datetimepicker.min.css') }}">

    <form>
        <div>
            <input type="text" name="" id="datetimepicker" class="form_datetime" data-link-format="yyyy-mm-dd" data-date-format="yyyy-mm-dd">
            <button id="submit_button" class="btn btn-primary" type="submit">确认</button>
        </div>
    </form>

    <div id="main" style="width: 600px;height: 400px"></div>

    <script type="text/javascript">
        $('#datetimepicker').datetimepicker({
            minView: "month",
            format: "yyyy-mm-dd",
            autoclose: true,
            todayBtn: true
        });
        var myChart = echarts.init(document.getElementById('main'), 'light');
        var app = {xday:[], yvalue:[]};


        function getData(){
            var date_time = $('#datetimepicker').val();
            $.ajax({
                url:'/test/',
                data: {'data_time':date_time},
                type:'POST',
                dataType: 'json',
                success:function (data) {
                    app.xday = data.xdays;
                    app.yvalue = data.yvalues;
                    myChart.setOption({
                        title: {text: '加载数据'},
                        tooltip: {},
                        xAxis: {
                          data: app.xday
                        },
                        yAxis: [{
                            max:1,
                            min:0.95,
                            splitNumber:20
                        }],
                        series: [{
                            name: '比值',
                            type: 'line',
                            data: app.yvalue
                        }]
                    })
                },
                error:function (msg) {
                    swal({title:"所选日期无数据"});
                }
            })
        }

        $('#submit_button').click(function(){
            event.preventDefault();

            var date_time = $('#datetimepicker').val();
            $.ajax({
                url:'/table_collection/',
                method:'POST',
                data: {'data_time':date_time},
                success:function (data) {
                    if (data['msg'] == 'error'){
                        swal({title:"所选日期无数据"})
                    } else {
                        getData()
                    }
                },
                error:function (msg) {
                    console.log(msg);
                    swal({title:"所选日期无数据"})
                }
            })
        });
    </script>


{% endblock %}