jQuery手机移动端日历日期选择是一款依赖于iScroll滑动组件，样式不附加任何图片，日期精确到了小时和分钟，能自动定位到当前系统时间。
在页面中引入date.js和iscroll.js文件
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>jQuery手机移动端日历日期选择</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="js/date.js" ></script>
<script type="text/javascript" src="js/iscroll.js" ></script>
<script type="text/javascript">
$(function(){
$('#beginTime').date();
$('#endTime').date({theme:"datetime"});
});
</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>
</html>
/*
* 日期插件
* 滑动选取日期（年，月，日）
* V1.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:2000, //日期--年--份开始
endyear:2020, //日期--年--份结束
beginmonth:1, //日期--月--份结束
endmonth:12, //日期--月--份结束
beginday:1, //日期--日--份结束
endday:31, //日期--日--份结束
beginhour:1,
endhour:12,
beginminute:00,
endminute:59,
curdate:false, //打开日期是否定位到当前日期
theme:"date", //控件样式（1：日期，2：日期+时间）
mode:null, //操作模式（滑动模式）
event:"click", //打开日期插件默认方式为点击后后弹出日期
show:true
}
//用户选项覆盖插件默认选项
var opts = $.extend( true, {}, $.fn.date.defaultOptions, options );
if(opts.theme === "datetime"){datetime = true;}
if(!opts.show){
that.unbind('click');
}
else{
//绑定事件（默认事件为获取焦点）
that.bind(opts.event,function () {
createUL(); //动态生成控件显示的日期
init_iScrll(); //初始化iscrll
extendOptions(); //显示控件
that.blur();
if(datetime){
showdatetime();
refreshTime();
}
refreshDate();
bindButton();
})
};
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 = $("#yearwrapper ul li:eq("+indexY+")").html().substr(0,$("#yearwrapper ul li:eq("+indexY+")").html().length-1)+"-"+
$("#monthwrapper ul li:eq("+indexM+")").html().substr(0,$("#monthwrapper ul li:eq("+indexM+")").html().length-1)+"-"+
$("#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)))
}
datestr+=" "+$("#Hourwrapper ul li:eq("+indexH+")").html().substr(0,$("#Minutewrapper ul li:eq("+indexH+")").html().length-1)+":"+
$("#Minutewrapper ul li:eq("+indexI+")").html().substr(0,$("#Minutewrapper ul li:eq("+indexI+")").html().length-1);
indexS=0;
}
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);
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
