bootstrap-datepicker时间设置

最新推荐文章于 2025-09-14 00:04:07 发布

原创最新推荐文章于 2025-09-14 00:04:07 发布 · 2k 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用Highcharts库创建订单交易额统计图表的方法。该图表能够展示特定日期范围内的交易额变化趋势，并通过设置起始和结束日期来筛选数据。此外，还实现了根据所选日期范围自动调整日期选择器的有效区间。

<script>

    $(function () {
        //设置日期范围
        $( "#start" ).datepicker({
            language:"zh-CN",
            format:"yyyy-mm-dd",
            autoclose: true,
            todayHighlight: true
        }).on('changeDate',function(){
            d = new Date($('#start').val());
            d.setMonth(d.getMonth()+1);
            $('#end').datepicker('setStartDate',$('#start').val());
            $('#end').datepicker('setEndDate',d);
        });
        $( "#end" ).datepicker({
            language:"zh-CN",
            format:"yyyy-mm-dd",
            autoclose: true,
            todayHighlight: true
        }).on('changeDate',function(){
            d = new Date($('#end').val());
            d.setMonth(d.getMonth()-1);
            $('#start').datepicker('setEndDate',$('#end').val());
            $('#start').datepicker('setStartDate',d);
        });
    });
    var data = eval("{$data}");
    Highcharts.chart('container', {
        chart: {
            type: 'spline',
        },
        title: {
            text: '订单交易额统计'
        },
        subtitle: {
            text: ''
        },
        yAxis: {
            title: {
                text: '交易额'
            },
            labels: {
                formatter: function () {
                    return this.value + '元';
                }
            }
        },
        xAxis: {
            title: {
                text: '日期'
            },
            type: 'category',

        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            spline: {
                marker: {
                    enable: false
                }
            }
        },
        series: [{
            name: '交易额',
            data:data
        }]
    });
</script>