/*
* 日期插件
* 滑动选取日期(年,月,日)
* V2.1
*/
(function ($) {
$.fn.date = function (options, Ycallback, Ncallback) {
//插件默认选项
var that = $(this);
var docType = $(this).is('input');
var datetime = false;
var nowdate = new Date();
var indexY = 1,
indexM = 1,
indexD = 1;
var indexH = 1,
indexI = 1,
indexS = 0;
var initY = parseInt((nowdate.getYear() + "").substr(1, 2));
var initM = parseInt(nowdate.getMonth() + "") + 1;
var initD = parseInt(nowdate.getDate() + "");
var initH = parseInt(nowdate.getHours());
var initI = parseInt(nowdate.getMinutes());
var initS = parseInt(nowdate.getYear());
var yearScroll = null,
monthScroll = null,
dayScroll = null;
var HourScroll = null,
MinuteScroll = null,
SecondScroll = null;
$.fn.date.defaultOptions = {
beginyear: 1900, //日期--年--份开始
endyear: 2999, //日期--年--份结束
beginmonth: 1, //日期--月--份结束
endmonth: 12, //日期--月--份结束
beginday: 1, //日期--日--份结束
endday: 31, //日期--日--份结束
beginhour: 1,
endhour: 12,
beginminute: 00,
endminute: 59,
curdate: true, //打开日期是否定位到当前日期
theme: "date", //控件样式(1:日期,2:日期+时间)
mode: null, //操作模式(滑动模式)
event: "click", //打开日期插件默认方式为点击后后弹出日期
show: true,
fromat: 'yyyy/dd/mm'
};
//用户选项覆盖插件默认选项
var opts = $.extend(true, {}, $.fn.date.defaultOptions, options);
if (opts.theme === "datetime") {
datetime = true;
}
if (!opts.show) {
that.unbind(opts.event);
} else {
//绑定事件(默认事件为获取焦点)
that.bind(opts.event, function () {
createUL(); //动态生成控件显示的日期
init_iScrll(); //初始化iscrll
extendOptions(); //显示控件
that.blur();
if (datetime) {
showdatetime();
refreshTime();
}
refreshDate();
bindButton();
});
}
//>2000年
if (opts.beginyear < 2000) {
initY = initY + 100;
}
function refreshDate() {
yearScroll.refresh();
monthScroll.refresh();
dayScroll.refresh();
resetInitDete();
yearScroll.scrollTo(0, initY * 40, 100, true);
monthScroll.scrollTo(0, initM * 40 - 40, 100, true);
dayScroll.scrollTo(0, initD * 40 - 40, 100, true);
}
function refreshTime() {
HourScroll.refresh();
MinuteScroll.refresh();
SecondScroll.refresh();
if (initH > 12) { //判断当前时间是上午还是下午
SecondScroll.scrollTo(0, initD * 40 - 40, 100, true); //显示“下午”
initH = initH - 12 - 1;
}
HourScroll.scrollTo(0, initH * 40, 100, true);
MinuteScroll.scrollTo(0, initI * 40, 100, true);
initH = parseInt(nowdate.getHours());
}
function resetIndex() {
indexY = 1;
indexM = 1;
indexD = 1;
}
function resetInitDete() {
if (opts.curdate) {
return false;
} else if (that.val() === "") {
return false;
}
initY = parseInt(that.val().substr(2, 2));
initM = parseInt(that.val().substr(5, 2));
initD = parseInt(that.val().substr(8, 2));
}
function bindButton() {
resetIndex();
$("#dateconfirm").unbind('click').click(function () {
var datestr = function () {
var d = '';
d = opts.fromat.replace('yyyy', $("#yearwrapper ul li:eq(" + indexY + ")").html().substr(0, $("#yearwrapper ul li:eq(" + indexY + ")").html().length - 1));
d = d.replace('mm', $("#monthwrapper ul li:eq(" + indexM + ")").html().substr(0, $("#monthwrapper ul li:eq(" + indexM + ")").html().length - 1));
d = d.replace('dd', $("#daywrapper ul li:eq(" + Math.round(indexD) + ")").html().substr(0, $("#daywrapper ul li:eq(" + Math.round(indexD) + ")").html().length - 1))
if (datetime) {
if (Math.round(indexS) === 1) { //下午
$("#Hourwrapper ul li:eq(" + indexH + ")").html(parseInt($("#Hourwrapper ul li:eq(" + indexH + ")").html()
.substr(0, $("#Hourwrapper ul li:eq(" + indexH + ")").html().length - 1)) + 12)
} else {
$("#Hourwrapper ul li:eq(" + indexH + ")").html(parseInt($("#Hourwrapper ul li:eq(" + indexH + ")").html()
.substr(0, $("#Hourwrapper ul li:eq(" + indexH + ")").html().length - 1)))
}
d = d.replace('hh', $("#Hourwrapper ul li:eq(" + indexH + ")").html().substr(0, $("#Minutewrapper ul li:eq(" + indexH + ")").html().length - 1));
d = d.replace('ii', $("#Minutewrapper ul li:eq(" + indexI + ")").html().substr(0, $("#Minutewrapper ul li:eq(" + indexI + ")").html().length - 1));
indexS = 0;
}
return d
}
if (Ycallback === undefined) {
if (docType) {
that.val(datestr);
} else {
that.html(datestr);
}
} else {
Ycallback(datestr);
}
$("#datePage").hide();
$("#dateshadow").hide();
});
$("#datecancle").click(function () {
$("#datePage").hide();
$("#dateshadow").hide();
//Ncallback(false);
});
}
function extendOptions() {
$("#datePage").show();
$("#dateshadow").show();
}
//日期滑动
function init_iScrll() {
var strY = $("#yearwrapper ul li:eq(" + indexY + ")").html().substr(0, $("#yearwrapper ul li:eq(" + indexY + ")").html().length - 1);
var strM = $("#monthwrapper ul li:eq(" + indexM + ")").html().substr(0, $("#monthwrapper ul li:eq(" + indexM + ")").html().length - 1);
yearScroll = new iScroll("yearwrapper", {
snap: "li",
vScrollbar: false,
onScrollEnd: function () {
indexY = (this.y / 40) * (-1) + 1;
opts.endday = checkdays(strY, strM);
$("#daywrapper ul").html(createDAY_UL());
dayScroll.refresh();
}
});
monthScroll = new iScroll("monthwrapper", {
snap: "li",
vScrollbar: false,
onScrollEnd: function () {
indexM = (this.y / 40) * (-1) + 1;
opts.endday = checkdays(strY, strM);
$("#daywrapper ul").html(createDAY_UL());
dayScroll.refresh();
}
});
dayScroll = new iScroll("daywrapper", {
snap: "li",
vScrollbar: false,
onScrollEnd: function () {
indexD = (this.y / 40) * (-1) + 1;
}
});
}
function showdatetime() {
init_iScroll_datetime();
addTimeStyle();
$("#datescroll_datetime").show();
$("#Hourwrapper ul").html(createHOURS_UL());
$("#Minutewrapper ul").html(createMINUTE_UL());
$("#Secondwrapper ul").html(createSECOND_UL());
}
//日期+时间滑动
function init_iScroll_datetime() {
HourScroll = new iScroll("Hourwrapper", {
snap: "li",
vScrollbar: false,
onScrollEnd: function () {
indexH = Math.round((this.y / 40) * (-1)) + 1;
HourScroll.refresh();
}
});
MinuteScroll = new iScroll("Minutewrapper", {
snap: "li",
vScrollbar: false,
onScrollEnd: function () {
indexI = Math.round((this.y / 40) * (-1)) + 1;
HourScroll.refresh();
}
});
SecondScroll = new iScroll("Secondwrapper", {
snap: "li",
vScrollbar: false,
onScrollEnd: function () {
indexS = Math.round((this.y / 40) * (-1));
HourScroll.refresh();
}
});
}
function checkdays(year, month) {
var new_year = year; //取当前的年份
var new_month = month++; //取下一个月的第一天,方便计算(最后一天不固定)
if (month > 12) //如果当前大于12月,则年份转到下一年
{
new_month -= 12; //月份减
new_year++; //年份增
}
var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate(); //获取当月最后一天日期
}
function createUL() {
CreateDateUI();
$("#yearwrapper ul").html(createYEAR_UL());
$("#monthwrapper ul").html(createMONTH_UL());
$("#daywrapper ul").html(createDAY_UL());
}
function CreateDateUI() {
var str = '' +
'<div id="dateshadow"></div>' +
'<div id="datePage" class="page">' +
'<section>' +
'<div id="datetitle"><h1>请选择日期</h1></div>' +
'<div id="datemark"><a id="markyear"></a><a id="markmonth"></a><a id="markday"></a></div>' +
'<div id="timemark"><a id="markhour"></a><a id="markminut"></a><a id="marksecond"></a></div>' +
'<div id="datescroll">' +
'<div id="yearwrapper">' +
'<ul></ul>' +
'</div>' +
'<div id="monthwrapper">' +
'<ul></ul>' +
'</div>' +
'<div id="daywrapper">' +
'<ul></ul>' +
'</div>' +
'</div>' +
'<div id="datescroll_datetime">' +
'<div id="Hourwrapper">' +
'<ul></ul>' +
'</div>' +
'<div id="Minutewrapper">' +
'<ul></ul>' +
'</div>' +
'<div id="Secondwrapper">' +
'<ul></ul>' +
'</div>' +
'</div>' +
'</section>' +
'<footer id="dateFooter">' +
'<div id="setcancle">' +
'<ul>' +
'<li id="dateconfirm">确定</li>' +
'<li id="datecancle">取消</li>' +
'</ul>' +
'</div>' +
'</footer>' +
'</div>';
$("#datePlugin").html(str);
}
function addTimeStyle() {
$("#datePage").css("height", "380px");
$("#datePage").css("top", "60px");
$("#yearwrapper").css("position", "absolute");
$("#yearwrapper").css("bottom", "200px");
$("#monthwrapper").css("position", "absolute");
$("#monthwrapper").css("bottom", "200px");
$("#daywrapper").css("position", "absolute");
$("#daywrapper").css("bottom", "200px");
}
//创建 --年-- 列表
function createYEAR_UL() {
var str = "<li> </li>";
for (var i = opts.beginyear; i <= opts.endyear; i++) {
str += '<li>' + i + '年</li>';
}
return str + "<li> </li>";
}
//创建 --月-- 列表
function createMONTH_UL() {
var str = "<li> </li>";
for (var i = opts.beginmonth; i <= opts.endmonth; i++) {
if (i < 10) {
i = "0" + i
}
str += '<li>' + i + '月</li>';
}
return str + "<li> </li>";
}
//创建 --日-- 列表
function createDAY_UL() {
$("#daywrapper ul").html("");
var str = "<li> </li>";
for (var i = opts.beginday; i <= opts.endday; i++) {
str += '<li>' + i + '日</li>';
}
return str + "<li> </li>";
}
//创建 --时-- 列表
function createHOURS_UL() {
var str = "<li> </li>";
for (var i = opts.beginhour; i <= opts.endhour; i++) {
str += '<li>' + i + '时</li>';
}
return str + "<li> </li>";
}
//创建 --分-- 列表
function createMINUTE_UL() {
var str = "<li> </li>";
for (var i = opts.beginminute; i <= opts.endminute; i++) {
if (i < 10) {
i = "0" + i;
}
str += '<li>' + i + '分</li>';
}
return str + "<li> </li>";
}
//创建 --分-- 列表
function createSECOND_UL() {
var str = "<li> </li>";
str += "<li>上午</li><li>下午</li>";
return str + "<li> </li>";
}
}
})(jQuery);
引用
<script type="text/javascript" src="jquery-1.9.1.js" ></script>
<script type="text/javascript" src="date.js" ></script>
<script type="text/javascript" src="iscroll.js" ></script>
<script type="text/javascript">
$(function(){
$('#beginTime').date({
fromat: 'yyyy-mm-dd'
});
$('#endTime').date({
theme:"datetime",
fromat: 'yyyy年mm月dd日 hh时ii分'
});
});
</script>
</head>
<body>
<style type="text/css">
.demo{width:300px;margin:40px auto 0 auto;}
.demo .lie{margin:0 0 20px 0;}
</style>
<div class="demo">
<div class="lie">日期设置-1:<input id="beginTime" class="kbtn" /></div>
<div class="lie">日期设置-2:<input id="endTime" class="kbtn" /></div>
</div>
<div id="datePlugin"></div>
</body>