bootstrap双日期选择插件

为了配合项目,找了好久都没有找到合适的bootstrap双日期选择插件,后面再github上找了一个英文双日期插件汉化了一下,跟大家分享一下,如图:

使用起来跟my97很相似,下面介绍一下使用方法

页面:

<input style='width:300px;' id="timeRange" name="" value="">

js:

$('#timeRange').daterangepicker({   
	showDropdowns: true,
	autoApply: true,
	linkedCalendars: false,
	startDate: moment().subtract( 7,'days'),  //起始时间:今天前的90天 ,有years,months,days
	endDate: moment(),  //结束时间:今天,(可省略,默认就是今天)
	minDate: moment().subtract(3,'months'),  //可选最早时间:今天前的3个月
	maxDate: moment(),     //可选最迟时间:5年后的今天,也可指定具体值 eg:"12/31/2080"
	dateLimit: { months: 3 },
	opens: "center"   //选择框显示在input框左边/中间/右边
})

 参数说明:
    `startDate`: (Date object, moment object or string) 起始时间
    `endDate`: (Date object, moment object or string) 结束时间
    `minDate`: (Date object, moment object or string) 可选最早时间
    `maxDate`: (Date object, moment object or string) 可选最迟时间
    `timePicker`: (boolean) 是否显示time选择
    `timePickerIncrement`: (number) time选择递增数
    `timePicker12Hour`: (boolean) 是否12小时制
    `opens`: (string: 'left'/'right') 显示在元素左边还是右边
    `buttonClasses`: (array) 按钮样式
    `applyClass`: (string) 应用按钮样式
    `cancelClass`: (string) 取消按钮样式
    `format`: (string) date/time格式
    `separator`: (string) 分隔符
    `locale`: (object) 本地设置
    dateLimit: { months: 3 },  时间范围
     
    `singleDatePicker`: (boolean) 是否是单个时间选择器
    `parentEl`: (string) 将控件放到哪个元素内,默认body
希望对大家有帮助,反正我是觉得挺好用的,地址是:http://download.csdn.net/detail/yayue1573/9450163


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Js日历控件,在一个网页上同时显示两个日期选择器,写成了封装类,方便使用者调用。同时美化的相当不错。   包括了以下函数:   1、2012——2020年节假日信息(包括节假日前1~3天/后1~3天)   2、格式化数字,不足两位前面补0   3、将日期对象/日期字会串格式化为指定日期字符串   4、将日期字符串格式化为数字   5、获取目标元素针对于文档的位置   6、元素选择器   7、查找元素位置   8、判断目标元素是否包含指定的className      关于一些日历调用的参数说明:Calendar({    id: "#J_date_1", //触发显示日历元素ID    isPopup: !0, //弹出式日历    isPrevBtn: !0, //显示上月按钮    isNextBtn: !0, //显示下月按钮    isCloseBtn: !0, //显示关闭按钮    isHoliday: !0, //节假日特殊显示    isHolidayTips: !0, //显示节假日1~3天/后1~3天信息    isDateInfo: !0, //显示日期信息    isMessage: !0, //有日历提示信息    isCalStart: !0, //标记为开始时间    dateInfoClass: "date-info-start", //开始时间icon样式    range: {mindate: "2011-09-01", maxdate: "2020-12-31"},//限制范围(当天——2020-12-31)    count: 2, //日历个数    monthStep: 1, //切换上下月日历步长    onSelectDate: fnSelectDate, //选择日期回调方法    onClose: fnClose //关闭日历回调方法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值