<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间控件</title>
<link rel="stylesheet" href="newDate.css">
<script src="My97DatePicker/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<div class="date-filter">
<div class="con" id="con">
<span class="changedt" id="year">按年</span>
<span class="changedt" id="month">按月</span>
<span class="changedt dtcur" id="date">按天</span>
<span class="changedt" id="time">按小时</span>
<span class="pl-20">时间段：</span>
<!-- 由于My97DatePicker插件，在按年月日等分开选项，如果只加载到同一个input上，会有冲突，所以要分别进行加载 -->
<div class="dsnb" id="yearCon" style="display:none">
<input class="setdate" id="year-start" type="text" />
<span>-</span>
<input class="setdate" id="year-end" type="text" />
</div>
<div class="dsnb" id="monthCon" style="display:none">
<input class="setdate" id="month-start" type="text" />
<span>-</span>
<input class="setdate" id="month-end" type="text" />
</div>
<div class="dsnb" id="dateCon" style="">
<input class="setdate" id="date-start" type="text" />
<span>-</span>
<input class="setdate" id="date-end" type="text" />
</div>
<div class="dsnb" id="timeCon" style="display:none">
<input class="setdate" id="time-start" type="text" value="00" />
<span>-</span>
<input class="setdate" id="time-end" type="text" />
</div>
</div>
</div>
<script>
var $start, $end;
function initDate () {
var date = new Date();
var year = date.getFullYear();
$('#date-start').val(formatDate(date, "yyyy-MM-dd"));
$('#date-end').val(GetDateStr(1));
$start = $('#date-start');
$end = $('#date-end');
$('#date-start').unbind('focus');
$('#date-start').bind('focus', function () {
WdatePicker({highLineWeekDay: true, dateFmt: 'yyyy-MM-dd', maxDate: '#F{$dp.$D(\'date\-end\')}'});
});
$('#date-end').unbind('focus');
$('#date-end').bind('focus', function () {
WdatePicker({highLineWeekDay: true, dateFmt: 'yyyy-MM-dd', minDate: '#F{$dp.$D(\'date\-start\')}'});
});
}
/*
* 日历时间获取
* */
function getDateTime () {
$('.changedt').on('click',function () {
var getDateState;
var dataId = $(this).attr('id');
$start = $('#' + dataId + '-start');
$end = $('#' + dataId + '-end');
$('#' + dataId).addClass('dtcur').siblings().removeClass('dtcur');
$('#' + dataId + 'Con').attr('style', 'display:inline-blobk').siblings('.dsnb').attr('style', 'display:none');
$start.unbind('focus');
$end.unbind('focus');
if (dataId === 'year') {
getDateState = 'yyyy';
} else if(dataId === 'month') {
getDateState = 'yyyy-MM';
} else if(dataId === 'date') {
getDateState = 'yyyy-MM-dd';
} else {
getDateState = 'HH';
}
$start.val('');
$('#time-start').val('00');
$end.val('');
$start.bind('focus', function () {
WdatePicker({highLineWeekDay: true, dateFmt: getDateState, maxDate: '#F{$dp.$D(\'' + dataId + '\-end\')}'});
});
$end.bind('focus', function () {
WdatePicker({highLineWeekDay: true, dateFmt: getDateState, minDate: '#F{$dp.$D(\'' + dataId + '\-end\')}'});
});
});
}
initDate();
getDateTime();
/*
* 日期格式化
* str 日期参数
* fmt 格式化格式，例："yyyy-MM-dd"
* */
function formatDate(str, fmt) {
var currDate;
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, // 月份
"d+": this.getDate(), // 日
"h+": this.getHours(), // 小时
"m+": this.getMinutes(), // 分
"s+": this.getSeconds(), // 秒
"q+": Math.floor((this.getMonth() + 3) / 3), // 季度
"S": this.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
};
var fmt = fmt || 'yyyy-MM-dd hh:mm:ss';
currDate = str.Format(fmt);
return currDate;
}
/*
* 获取当天后AddDayCount天的日期
* AddDayCount 数字参数 例：1
* */
function GetDateStr (AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期
var y = dd.getFullYear(),
m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1), // 获取当前月份的日期
d = (dd.getDate() < 10) ? '0' + dd.getDate() : dd.getDate();
return y + "-" + m + "-" + d;
}
</script>
</body>
</html>
My97DatePickerDemo实例
4星 · 超过85%的资源 需积分: 10 14 浏览量
2017-11-10
16:16:50
上传
评论
收藏 64KB RAR 举报 
DatePickerDemo.rar （22个子文件） 
DatePickerDemo My97DatePicker 
WdatePicker.js 10KB lang zh-cn.js 1KB en.js 644B zh-tw.js 1KB skin 
datePicker.gif 1KB whyGreen img.gif 2KB datepicker.css 4KB
bg.jpg 307B WdatePicker.css 192B default img.gif 2KB datepicker.css 4KB jquery-1.8.3.min.js 91KB calendar.js 24KB .idea misc.xml 836B DatePicker.iml 281B .name 10B modules.xml 272B encodings.xml 159B workspace.xml 32KB .project 1KB
newDate.html 6KB newDate.css 824B资源评论
李文2017-11-17好东西，谢谢分享资源！
倾心软件2019-04-16C#下用不了,这个是个JS控件.
一纸奇文
- 粉丝: 7
- 资源: 8
