Angular学习

最新推荐文章于 2024-09-29 11:15:02 发布

junxiazhao

最新推荐文章于 2024-09-29 11:15:02 发布

阅读量257

点赞数

分类专栏：前端文章标签： angular

本文链接：https://blog.csdn.net/LIMOXI/article/details/92807223

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

angular.js时间插件

Html部分

<form name="dateForm" class="form-inline">
    <div class="form-group" class="pull-left dateRange">
        <input date-range-picker id="divDateId11" name="daterange" class="form-control date-picker"
               id="searchDate" type="text" ng-model="datePickerDate"
               options="opts"/>
        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
    </div>
</form>

Js引用:

<script src="../../js/angular.min.js"></script>

<script src="../../js/newScreen/resources/bootstrap.min.js"></script>

<script type="text/javascript" src="../../js/newScreen/resources/daterangepicker/moment.min.js"></script>
<script type="text/javascript" src="../../js/newScreen/resources/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="../../js/newScreen/resources/daterangepicker/angular-daterangepicker.js"></script>

css引用:

<link href="../../css/newScreen/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../js/newScreen/resources/daterangepicker/daterangepicker.css">

申明部分:

var app = angular.module('controlCenter', ['daterangepicker']);

初始化时间:
$scope.datePickerDate = {startDate: moment().subtract('days', 365), endDate: moment().format('YYYY-MM-DD')};
时间选择相关配置:
$scope.opts = {
    showDropdowns: true,
    showWeekNumbers: false, //是否显示第几周
    timePicker: false, //是否显示小时和分钟
    timePickerIncrement: 60, //时间的增量，单位为分钟
    timePicker12Hour: false, //是否使用12小时制来显示时间
    ranges: {
        //   '最近1小时': [moment().subtract('hours',1), moment()],
        '今日': [moment().startOf('day'), moment()],
        '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
        '最近7日': [moment().subtract('days', 6), moment()],
        '最近30日': [moment().subtract('days', 29), moment()],
        '最近一年': [moment().subtract('days', 365), moment()]
    },
    opens: 'left', //日期选择框的弹出位置
    buttonClasses: ['btn btn-default'],
    applyClass: 'btn-small btn-primary blue',
    cancelClass: 'btn-small',
    format: 'YYYY-MM-DD', //控件中from和to 显示的日期格式
    separator: ' to ',
    locale: {
        applyLabel: '确定',
        cancelLabel: '取消',
        fromLabel: '起始时间',
        toLabel: '结束时间',
        customRangeLabel: '自定义',
        daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
            '七月', '八月', '九月', '十月', '十一月', '十二月'],
        firstDay: 1,
        separator: ' - '
    }   //汉化日期控件
}

使用：（angular.js事件监听）

$scope.$watch('datePickerDate', function (newVal, oldVal) {
var newVal2 = $filter("formatDatefilter")(newVal.startDate);
var newVal3 = $filter("formatDatefilter")(newVal.endDate);

}）

angular.js自定义时间戳转时间filer

定义：

var app = angular.module('controlCenter', []);
//申明一个时间戳转时间filer
app.filter('formatDatefilter', function () {
    return function (input) {
        var date = new Date(input);
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        var formatDate = Y + M + D;
        return formatDate;
    }

});