整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ootstrap-datepicker是一個(gè)開源、基于bootstrap的日期選擇器，內(nèi)置60+種語(yǔ)言，基于bootstrap也使得選擇器非常美觀適合現(xiàn)代網(wǎng)站，功能強(qiáng)大，通過(guò)內(nèi)置屬性、方法、事件組合配置可以滿足幾乎所有日期選擇需求，唯一遺憾的是不支持時(shí)間選擇，只能選擇年月日。
1、下載及初始化
https://github.com/uxsolutions/bootstrap-datepicker
下載完成后解壓，把dist文件夾中的所有文件放到項(xiàng)目中任意位置，引入下圖所示的文件即可。
然后在頁(yè)面body元素中創(chuàng)建一個(gè)容器，如下所示。
最后在id為sandbox-container的div元素中創(chuàng)建input元素，并運(yùn)行以下代碼腳本，一個(gè)日期選擇器就創(chuàng)建好了。
2、特色展示
⑴組件選擇
⑵內(nèi)聯(lián)選擇
⑶范圍選擇
⑷格式化日期
⑸最大最小日期
⑹選擇器開始界面
0：天（默認(rèn)）
1：月
2：年
3：十年
4：世紀(jì)
⑺最大最小選擇精度
minViewMode最小、maxViewMode最大
0：天（最小默認(rèn)）
1：月
2：年
3：十年
4：世紀(jì)（最大默認(rèn)）
⑻今日、清除按鈕
⑼選擇器方向
auto：自動(dòng)（默認(rèn)）
top auto：向上自動(dòng)
bottom auto：向下自動(dòng)
auto left：自動(dòng)向左
top left：左上
bottom left：左下
auto right：自動(dòng)向右
top right：右上
bottom right：右下
⑽星期禁用、高亮
⑾多選、分隔符
⑿顯示第幾周
⒀選擇后自動(dòng)關(guān)閉
⒁今日高亮
⒂選擇器界面顯示之前的回調(diào)函數(shù)
有世紀(jì)、十年、年、月、日五種類型，如下所示是（日的例子）
⒃禁用日期
⒄選中取消
⒅默認(rèn)初始化視圖
⒆鍵盤操作
⒇星期幾作為一周的開始
在線演示網(wǎng)站：
https://uxsolutions.github.io/bootstrap-datepicker/
API文檔：
https://bootstrap-datepicker.readthedocs.io/en/latest/index.html
bootstrap datepicker內(nèi)置8個(gè)事件（顯示、隱藏選擇器事件、清除日期選中事件和世紀(jì)、十年、年、月、日改變事件），內(nèi)置20個(gè)方法（如銷毀、顯示、隱藏、更新選擇器方法等），支持鍵盤操作選擇日期，支持日期校驗(yàn)等，功能豐富，希望以后能夠加入時(shí)間選擇。
有哪里寫得不好的地方請(qǐng)大家提出來(lái)，請(qǐng)輕噴，謝謝。 同時(shí)有什么與編程相關(guān)的好東西可以推舉給我，再次感謝！
網(wǎng):
http://www.daterangepicker.com
關(guān)于參數(shù)匯總:
http://www.daterangepicker.com/#options
<link href="/css/daterangepicker.min.css?ver=0.6" rel="stylesheet" type="text/css" />
<script src="/js/date-time/moment.js?ver=0.6" type="text/javascript"></script>
<script src="/js/date-time/daterangepicker.zh-CN.js?ver=0.6" type="text/javascript"></script>
<script src="/js/date-time/daterangepicker.js?ver=0.6" type="text/javascript"></script>
<div class="input-group" style="width: 240px; margin-left: -5px;">
<input type="text" class=&qu·ot;form-control date-picker" id="dateTimeRange" value="" />
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
<input type="hidden" name="beginTime" id="beginTime" value="" />
<input type="hidden" name="endTime" id="endTime" value="" />
</div>
<a href="javascript：;" onclick="begin_end_time_clear();">清除</a>
<script type="text/javascript">
$(function() {
$('#dateTimeRange').daterangepicker({
applyClass : 'btn-sm btn-success',
cancelClass : 'btn-sm btn-default',
locale: {
applyLabel: '確認(rèn)',
cancelLabel: '取消',
fromLabel : '起始時(shí)間',
toLabel : '結(jié)束時(shí)間',
customRangeLabel : '自定義',
firstDay : 1
},
ranges : {
//'最近1小時(shí)': [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().startOf("month"),moment().endOf("month")],
'上個(gè)月': [moment().subtract(1,"month").startOf("month"),moment().subtract(1,"month").endOf("month")]
},
opens : 'right', // 日期選擇框的彈出位置
separator : ' 至 ',
showWeekNumbers : true, // 是否顯示第幾周
//timePicker: true,
//timePickerIncrement : 10, // 時(shí)間的增量，單位為分鐘
//timePicker12Hour : false, // 是否使用12小時(shí)制來(lái)顯示時(shí)間
//maxDate : moment(), // 最大時(shí)間
format: 'YYYY-MM-DD'
}, function(start, end, label) { // 格式化日期顯示框
$('#beginTime').val(start.format('YYYY-MM-DD'));
$('#endTime').val(end.format('YYYY-MM-DD'));
})
.next().on('click', function(){
$(this).prev().focus();
});
});
/**
* 清除時(shí)間
*/
function begin_end_time_clear() {
$('#dateTimeRange').val('');
$('#beginTime').val('');
$('#endTime').val('');
}
</script>單一時(shí)間顯示方法
1. 兼容IE8-11、360瀏覽器、chrome、firefox等主流瀏覽器，手機(jī)端也可使用；
2. 添加點(diǎn)擊前一周、后一周和高亮等功能。
1、初始化周歷原理：
首先獲取表示當(dāng)前星期幾的數(shù)字currDay = d.getDay()，一般是0（周日）-6（周六）；
然后把值取負(fù)數(shù)傳到方法creatWeeklyCalendar進(jìn)行循環(huán)顯示一周時(shí)間；
Tips：方法calcTime是利用當(dāng)前毫秒數(shù)+-循環(huán)數(shù)的毫秒數(shù)（someTime = d.getTime() + (24 * 60 * 60 * 1000) * num）算出這天的年月日。
for (var i = some, len = some + 7; i < len; i++) {
if (this.calcTime(i).month == currMonth && this.calcTime(i).date == currDate) {
html += '<li class="active"><a href="javascript：;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';
} else {
html += '<li><a href="javascript：;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';
}
}最后把html輸出到頁(yè)面。
2、前一周和后一周原理：
首先利用點(diǎn)擊前一周和后一周按鈕，對(duì)計(jì)算數(shù)clickedTimes進(jìn)行+-；
然后把clickedTimes新值傳到方法changeWeek；
最后執(zhí)行this.creatWeeklyCalendar(-currDay - (7 * clickedTimes))，重新輸出新一周的數(shù)據(jù)。
3、最后把構(gòu)造函數(shù)暴露window.WeeklyCalendar = WeeklyCalendar。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
