flask 继续学习

datetimepicker

web/templates/stat/index.html

{% extends "common/layout_main.html" %}
{% block content %}
{% include "common/tab_stat.html" %}
<div class="row m-t">
    <div class="col-lg-12" id="container" style="height: 400px;" data-highcharts-chart="0">
            图标使用Highchart
    </div>
    <div class="col-lg-12 m-t">
        <form class="form-inline" id="search_form_wrap">
            <div class="row p-w-m">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" placeholder="请选择开始时间" name="date_from" class="form-control" value="{{ search_con['date_from'] }}">
                    </div>
                </div>
                <div class="form-group m-r m-l">
                    <label>至</label>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" placeholder="请选择结束时间" name="date_to" class="form-control" value="{{ search_con['date_to'] }}">
                    </div>
                </div>
                <div class="form-group">
                    <a class="btn btn-w-m btn-outline btn-primary search">搜索</a>
                </div>
            </div>
            <hr>
        </form>
        <table class="table table-bordered m-t">
            <thead>
            <tr>
                <th>日期</th>
                <th>营收金额</th>
            </tr>
            </thead>
            <tbody>
            {% if list %}
                {% for item in list %}
            <tr>
                <td>{{ item.date }}</td>
                <td>{{ item.total_pay_money }}</td>
            </tr>
                {% endfor %}
            {% else %}
                <tr><td colspan="2">暂无数据~~</td></tr>
            {% endif %}
            </tbody>
        </table>
        <!--分页代码已被封装到统一模板文件中-->
        {% include 'common/pagenation.html' %}
    </div>
</div>
{% endblock %}
{% block css %}
<link href="{{ buildStaticUrl('/plugins/datetimepicker/jquery.datetimepicker.min.css') }}" rel="stylesheet">
{% endblock %}
{% block js %}
<script src="{{ buildStaticUrl('/plugins/highcharts/highcharts.js') }}"></script>
<script src="{{ buildStaticUrl('/js/chart.js') }}"></script>
<script src="{{ buildStaticUrl('/plugins/datetimepicker/jquery.datetimepicker.full.min.js') }}"></script>
<script src="{{ buildStaticUrl('/js/stat/index.js') }}"></script>
{% endblock %}

datetimepicker   插件如何使用呢？

首先引入到html中的css中来, 然后到js文件里进行相关的配置。

web/static/js/stat/index.js

;
var stat_index_ops = {
    init:function(){
        this.eventBind();
        this.drawChart();
        this.datetimepickerComponent();
    },
    eventBind:function(){
        $("#search_form_wrap .search").click( function(){
            $("#search_form_wrap").submit();
        });
    },
    datetimepickerComponent:function(){
        var that = this;
        // 设置日期选择器的语言为中文。
        $.datetimepicker.setLocale('zh');
        // 设置日期选择器的参数
        params = {
            // 禁用滚动输入
            scrollInput: false,

            // 禁用月份滚动
            scrollMonth: false,
            // 禁用时间滚动
            scrollTime: false,
            // 设置一周的起始日为星期一
            dayOfWeekStart: 1,
            // 设置语言为中文
            lang: 'zh',
            // 显示回到今天按钮
            todayButton: true,//回到今天
            // 默认选中当前日期
            defaultSelect: true,
            // 设置日期格式为年-月-日
            defaultDate: new Date().Format('yyyy-MM-dd'),
            format: 'Y-m-d',//格式化显示
            // 禁用时间选择
            timepicker: false
        };
        // 将日期选择器应用到指定的输入框上。
        $('#search_form_wrap input[name=date_from]').datetimepicker(params);
        $('#search_form_wrap input[name=date_to]').datetimepicker(params);

    },
    drawChart:function(){
        charts_ops.setOption();
        $.ajax({
            url:common_ops.buildUrl("/chart/finance"),
            dataType:'json',
            success:function( res ){
                charts_ops.drawLine( $('#container'),res.data )
            }
        });
    }
};

$(document).ready( function(){
    stat_index_ops.init();
});