|
|
/*
|
|
|
* 日期插件
|
|
|
* 滑动选取日期（年，月，日）
|
|
|
* V1.1
|
|
|
*/
|
|
|
(function ($) {
|
|
|
$.fn.date = function (options,Ycallback,Ncallback) {
|
|
|
//插件默认选项
|
|
|
var that = $(this);
|
|
|
var docType = $(this).is('input');
|
|
|
var datetime = false;
|
|
|
if(that.val()!=''){
|
|
|
var nowdate = new Date(that.val());
|
|
|
}else{
|
|
|
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:true, //打开日期是否定位到当前日期
|
|
|
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();
|
|
|
resetInitTime();
|
|
|
|
|
|
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);
|
|
|
if(that.val()!=''){
|
|
|
|
|
|
}else{
|
|
|
initH=parseInt(nowdate.getHours());
|
|
|
}
|
|
|
|
|
|
}
|
|
|
function resetIndex(){
|
|
|
indexY=1;
|
|
|
indexM=1;
|
|
|
indexD=1;
|
|
|
}
|
|
|
function resetInitDete(){
|
|
|
// if(opts.curdate){return false;}
|
|
|
if(that.val()!=""){
|
|
|
initY = parseInt(that.val().substr(2,2));
|
|
|
initM = parseInt(that.val().substr(5,2));
|
|
|
initD = parseInt(that.val().substr(8,2));
|
|
|
}
|
|
|
else if(that.val()===""){return false;}
|
|
|
|
|
|
}
|
|
|
function resetInitTime(){
|
|
|
// if(opts.curdate){return false;}
|
|
|
|
|
|
if(that.val()!=""){
|
|
|
var times=new Array();
|
|
|
times=that.val().split(' ');
|
|
|
var time=times[1];
|
|
|
var ta=new Array();
|
|
|
ta=String(time).split(':');
|
|
|
var ihour=ta[0];
|
|
|
var imin=ta[1]
|
|
|
if(ihour>12){ //判断当前时间是上午还是下午
|
|
|
SecondScroll.scrollTo(0, initD*40-40, 100, true); //显示“下午”
|
|
|
ihour=ihour-12-1;
|
|
|
}else{
|
|
|
ihour=ihour-1;
|
|
|
}
|
|
|
initH = parseInt(ihour);
|
|
|
initI = parseInt(imin);
|
|
|
}
|
|
|
else if(that.val()===""){return false;}
|
|
|
|
|
|
}
|
|
|
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;
|
|
|
}
|
|
|
datestr+=':00';
|
|
|
//将字符串转换为日期
|
|
|
var begin=new Date();
|
|
|
var end=new Date(datestr.replace(/-/g,"/"));
|
|
|
//js判断日期
|
|
|
if(begin-end>0){
|
|
|
createUL()
|
|
|
global_obj.win_alert("出发时间不可晚于当前时间");
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
MinuteScroll.refresh();
|
|
|
}})
|
|
|
SecondScroll = new iScroll("Secondwrapper",{snap:"li",vScrollbar:false,
|
|
|
onScrollEnd:function () {
|
|
|
indexS = Math.round((this.y/40)*(-1));
|
|
|
SecondScroll.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);
|
