daterangepicker 基础的配置

最新推荐文章于 2023-09-06 21:01:28 发布

木又日月

最新推荐文章于 2023-09-06 21:01:28 发布

阅读量1.1k

点赞数 1

分类专栏： daterangepicker angular 文章标签： angularjs daterangepicker

本文链接：https://blog.csdn.net/qq_35759390/article/details/65445526

版权

angular 同时被 2 个专栏收录

3 篇文章 1 订阅

订阅专栏

daterangepicker

1 篇文章 0 订阅

订阅专栏

daterangepicker angularjs下的配置其他环境下配置差不多

input(date-range-picker id="orderAnalysiss" name="orderAnalysis" options="memberTime" class="form-control date-picker" type="text" ng-model="orderTimeOpts")


$scope.orderTimeOpts = {
    locale: {
        applyClass: 'btn-green',
        applyLabel: "确定",
        fromLabel: "从",
        toLabel: "到",
        cancelLabel: '取消',
        customRangeLabel: '自定义日期',
        daysOfWeek: ['七', '一', '二', '三', '四', '五', '六'],
        firstDay: 1,
        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
            '十月', '十一月', '十二月'
        ]
    },                                      //基础配置
    ranges: {
        '过去 3 天': [moment().subtract(2, 'days'), moment()],
        '过去 7 天': [moment().subtract(6, 'days'), moment()],
        '过去 30 天': [moment().subtract(29, 'days'), moment()]
    },                                      //快速选择的3个按钮
    "opens": "right",                       //日期选择框的弹出位置
    format : 'YYYY-MM-DD HH:mm:ss',         //控件中from和to 显示的日期格式
    dateLimit : {
        days : 30
    },                                      //起止时间的最大间隔
minDate: '01/01/2012',                      //最小时间
    maxDate : moment(),                     //最大时间
    showWeekNumbers : false,                //是否显示第几周
    timePicker : true,                      //是否显示小时和分钟
    timePickerIncrement : 60,               //时间的增量，单位为分钟
    timePicker12Hour : false,               //是否使用12小时制来显示时间
    startDate: moment().startOf('day'),     //开始时间
    endDate: moment(),                      //结束时间
    eventHandlers: {
        'apply.daterangepicker': function (ev, picker) {
            //这里是当用户选择完成后触发的函数    ev
        }
    }
};

moment（）是一个时间格式化的插件 http://momentjs.cn/

日期格式化

moment().format('MMMM Do YYYY, h:mm:ss a'); // 三月 23日 2017, 5:01:39 下午
moment().format('dddd');                    // 星期四
moment().format("MMM Do YY");               // 3月 23日 17
moment().format('YYYY [escaped] YYYY');     // 2017 escaped 2017
moment().format();                          // 2017-03-23T17:01:39+08:00

相对时间

moment("20111031", "YYYYMMDD").fromNow(); // 5 年前
moment("20120620", "YYYYMMDD").fromNow(); // 5 年前
moment().startOf('day').fromNow();        // 17 小时前
moment().endOf('day').fromNow();          // 7 小时内
moment().startOf('hour').fromNow();       // 2 分钟前

日历时间

moment().subtract(10, 'days').calendar(); // 2017年3月13日
moment().subtract(6, 'days').calendar();  // 上周五下午5点01
moment().subtract(3, 'days').calendar();  // 本周一下午5点01
moment().subtract(1, 'days').calendar();  // 昨天下午5点01分
moment().calendar();                      // 今天下午5点01分
moment().add(1, 'days').calendar();       // 明天下午5点01分
moment().add(3, 'days').calendar();       // 本周日下午5点01
moment().add(10, 'days').calendar();      // 2017年4月2日

moment().format('L');    // 2017-03-23
moment().format('l');    // 2017-03-23
moment().format('LL');   // 2017年3月23日
moment().format('ll');   // 2017年3月23日
moment().format('LLL');  // 2017年3月23日下午5点02分
moment().format('lll');  // 2017年3月23日下午5点02分
moment().format('LLLL'); // 2017年3月23日星期四下午5点02分
moment().format('llll'); // 2017年3月23日星期四下午5点02分

判断闰年function isLeapYear(year) { return (year % 4 == 0 && year % 100 != 0 )|| (year % 400 == 0); }

在加上angular的过滤器

date过滤器的功能是基于要求的格式格式化一个日期成为一个字符串。

格式化字符串的基本参数：

‘yyyy’: 用4位数字表示年（例如：AD 1 => 0001, AD 2010 => 2010）

‘yy’: 用两位数字表示年（00-99）（例如：AD 2001 => 01, AD 2010 => 10）

‘y’: 用一位数字代表年（例如：AD 1 => 1, AD 199 => 199）

‘MMMM’: 英文全称表示月（January-December）

‘MMM’: 英文缩写表示月（Jan-Dec）

‘MM’: 两位数字表示月（01-12）

‘M’: 月（1-12）

‘dd’: 两位数字表示日（01-31）

‘d’: 日（1-31）

‘EEEE’: 英文全称的一周中的天（Sunday-Saturday）

‘EEE’: 英文缩写的一周中的天（Sun-Sat）

‘HH’: 两位数表示24小时制的时（00-23）

‘H’: 24小时制的时（0-23）

‘hh’: 两位数字表示上午或下午的时（01-12）

‘h’: 上午或下午的时（1-12）

‘mm’: 两位数字表示分（00-59）

‘m’: 分（0-59）

‘ss’: 两位数字表示秒（00-59）

‘s’: 秒（0-59）

‘sss’: 毫秒（000-999）

‘a’: AM/PM

‘Z’: 4位数字（+符号）代表时区偏移量（-1200——+1200）

‘ww’: 用两位数字表示一年的周数（00-53），第一周（01）是一年中的第一个星期四

‘w’: 一年的周数(0-53)，第一周（1）是一年中的第一个星期四

‘G’,’GG’,‘GGG’: 年代字符串的缩写形式，例如‘AD’（公元）

‘GGGG’: 年代字符串的全称，例如‘Anno Domini’（公元）

上面这些参数我们可以根据自己的意愿自由组合得到自己想要的格式，例如'yyyy-MM-dd'等。

格式化字符串也提供了一些预定义的本地化格式，可以方便我们使用：

medium：‘MMM d,y h:mm:ss a’ 例如：Sep 3, 2010 12:05:08 PM

short：‘M/d/yy h:mm a’ 例如： 9/3/10 12:05 PM

fullDate: ’EEEE,MMMM d,y’ 例如：Friday, September 3, 2010

longDate: ‘MMMM d,y’ 例如：September 3, 2010

mediumDate: ’MMM d,y’ 例如： Sep 3, 2010

shortDate: ’M/d/y’ 例如： 9/3/10

mediumTime: ’h:mm:ss a’ 例如：12:05:08 PM

shortTime: ’h:mm a’ 例如：12:05 PM

格式化字符串可以包含文本值。这些需要被单引号包围（例如 “h ‘in the morning’”）,如果想输出一对单引号，就在一个序列中用两个双引号（例如：“h ‘o’’clock’”）

date过滤器的用法：

1.在html中用法：{{ date_expression | date : format : timezone}}

实例：

{{1288323623006 | date:'medium'}}

{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}

{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}

{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}

输出结果为：

Oct 29, 2010 11:40:23 AM

2010-10-29 11:40:23 +0800

10/29/2010 @ 11:40AM

10/29/2010 at 11:40AM

2.在javascript中的用法：$filter('date')(date, format, timezone)

实例：

var today = new Date();
$scope.formatDate = $filter('date')(today, 'yyyy-MM-dd');

输出结果为：

2015-01-28

不够的话js原生献上

Date 对象

Date 对象用于处理日期和时间。

创建 Date 对象的语法：

var myDate=new Date()

注释：Date 对象会自动把当前日期和时间保存为其初始值。

Date 对象属性

属性	描述
constructor	返回对创建此对象的 Date 函数的引用。
prototype	使您有能力向对象添加属性和方法。

Date 对象方法

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	请使用 toUTCString() 方法代替。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

木又日月

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
daterangepicker 基础的配置

daterangepicker angularjs下的配置其他环境下配置差不多input(date-range-picker id="orderAnalysiss" name="orderAnalysis" options="memberTime" class="form-control date-picker" type="text" ng-model="orderTimeOpts
复制链接

扫一扫

专栏目录