WdatePicker时间插件

本文介绍了My97DatePicker插件的使用方法,包括如何配置日期选择器、限制日期范围等功能,并提供了具体的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用指南
  • My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
  • My97DatePicker.htm是必须文件,不可删除
  • 各目录及文件的用途: 
    WdatePicker.js 配置文件,在调用的地方仅需使用该文件 
    config.js 语言和皮肤配置文件 
    calendar.js 日期库主文件) 
    My97DatePicker.htm 临时页面文件,不可删除
    目录lang 存放语言文件 
    目录skin 存放皮肤的相关文件
  • 当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式

具体设置里面的功能属性请点(转):zengxin2008的专栏


代码演示:

<script type="text/javascript" src="/common/js/My97DatePicker-4.7PR2/WdatePicker.js"></script>     

    
   <tr>       
    <th><em>*</em><label for="lastNewOrgCode">有效起始时间:</label></th>
    <td>  
     <input id="startTime" name="startTime" type="text"style="width: 120px;" class="width_c" value=""	        
     onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss', minDate:$('#newDate').val(),onpicked:changeEndTime()})" /></td
    <th><em>*</em><label for="lastNewOrgCode">有效结束时间:</label></th>
    <td>     
       <input id="endTime" name="endTime" type="text"style="width: 120px;" class="width_c" value=""
	 onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:$('#startTime').val()})" /></td> 
</tr>

maxDate:'%y-%M-%d'              ~~~~代表只能选择当前时间的日期

minDate:$('#beginTime').val()  ,maxDate:'#F{$dp.$D(\'beginTime\',{d:+30})}'     ~~代表选择两个日期在30天以内的日期

效果图演示:


----------6.3补充--------------------要求二------------------------------

起始时间只能选择周一;结束时间选择一周以后(即默认周日)。

<tr>
    <td style="text-align: right;"><em>*</em>日期:</td>
    <td style="text-align: left;" colspan="3">
        <input style="width:120px;" type="text" id="beginTime" class="Wdate width_time2"   
            onfocus="WdatePicker({doubleCalendar:false,maxDate:'${maxWeek}',dateFmt:'yyyy-MM-dd',onpicked:getSunday})" value="${maxWeek}"/>&nbsp;&nbsp;至:
        <input style="width:120px;" type="text" id="endTime" class="Wdate width_time2"   
            onfocus="WdatePicker({doubleCalendar:false,dateFmt:'yyyy-MM-dd'})" value="" disabled="disabled"/>
    </td>
</tr>


getWeekDay();
function getWeekDay(){
	var today=new Date($("#beginTimeReport").val().replace(/-/g,   "/"));
	var weekday=today.getDay();
	if(weekday == 0){
		 $("#endTime").val($("#beginTime").val());
		 var monday=new Date(1000*60*60*24*(1-(weekday+7)) + today.getTime());    
		 $("#beginTime").val(getDateStr(monday,today));
	}else{
		 var sunday=new Date(1000*60*60*24*(7-weekday) + today.getTime());   
		$("#endTime").val(getDateStr(sunday,today));
		var monday=new Date(1000*60*60*24*(1-weekday) + today.getTime());    
		$("#beginTime").val(getDateStr(monday,today));
	}
}

function getSunday()
{
 var today=new Date($("#beginTime").val().replace(/-/g,   "/"));
 var weekday=today.getDay();
 if(weekday == 0){
	 $("#endTime").val($("#beginTime").val());
	 var monday=new Date(1000*60*60*24*(1-(weekday+7)) + today.getTime());    
	 $("#beginTime").val(getDateStr(monday,today));
 }else{
	 var sunday=new Date(1000*60*60*24*(7-weekday) + today.getTime());   
	 $("#endTime").val(getDateStr(sunday,today));
	 var monday=new Date(1000*60*60*24*(1-weekday) + today.getTime());    
	 $("#beginTime").val(getDateStr(monday,today));
 }
}
function getDateStr(dd,today){
    var y = dd.getFullYear();
    var m = dd.getMonth()+1;//获取当前月份的日期
    var yy = today.getFullYear();
    var mm=today.getMonth()+1;
    mm=parseInt(mm, 10);//十进制结果
    if(mm<10){
        mm="0"+mm;
    }
    m=parseInt(m,10);
    if(m<10){
        m="0"+m;
    }
	var oneday=new Date((yy+"-"+mm+"-01").replace(/-/g,   "/"));//判断是不是比输入当前月的最开始一天小
    if(dd.getTime()<oneday.getTime()){
    	return yy+"-"+mm+"-01";
    }
    var  day = new Date(yy,mm,0); 
    var endday=new Date((yy+"-"+mm+"-"+day.getDate()).replace(/-/g,   "/"));//获取当前输入月的最后一天
    if(dd.getTime()>endday.getTime()){
    	return yy+"-"+mm+"-"+day.getDate();
    }
    var d = dd.getDate();
    d=parseInt(d,10);
    if(d<10){
        d="0"+d;
    }
    return y+"-"+m+"-"+d;
}


**********6.6补充**************要求****************

起始时间到结束时间查询范围为30天

<tr>
	<td style="text-align: right;"><em>*</em>处罚日期:</td>
	<td style="text-align: left;" colspan="3">
            <input style="width:120px;" type="text" id="beginTime" class="Wdate width_time2"   
		onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',onpicked:dlick(),maxDate:'%y-%M-%d'})" />  ~
	    <input style="width:120px;" type="text" id="endTime" class="Wdate width_time2"   
		onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:$('#beginTime').val(),maxDate:'#F{$dp.$D(\'beginTime\',{d:+30})}'  })"  />
	</td>
</tr>
Day();
function Day(){
	
	var d = new Date();
	var vYear = d.getFullYear();
	var vMon = d.getMonth()+1;
	var vDay = d.getDate();
	var today = vYear + "-" + (vMon<10 ? "0" + vMon : vMon) + "-" + (vDay<10 ?  "0"+ vDay : vDay);
	//console.log("-------------"+beginTimes);
	$("#beginTime").val(today); 
	$("#beginTimeReport").val(today);
	getSunday();
	$("#beginTime").val(today);

}

function dlick(){	
	//起始时间
	var startTime = $("#beginTime").val(); 
	var timestamp = Date.parse(new Date(startTime));
	var timestamp2 = timestamp/1000;
	var timestamp3 = timestamp2+2592000;
	//将时间戳转换为格式日期
	$("#endTime").val(timeFormat(timestamp3));	
}
function timeFormat(timestamp3){
  //timestamp是整数,否则要parseInt转换,不会出现少个0的情况
    var time = new Date(timestamp3*1000);
    var year = time.getFullYear();
    var month = time.getMonth()+1;
    var date = time.getDate();
    return year+'-'+add0(month)+'-'+add0(date);
}
function add0(m){return m<10?'0'+m:m;}



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值