码迷,mamicode.com
首页 > 其他好文 > 详细

WdatePicker日历控件使用方法

时间:2015-03-15 12:24:23      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:

一、具体用法可参考官方文档:http://www.my97.net/dp/demo/resource/main.asp

二、工作中的例子:
1、日期选择后,时间自动填充为当前时间

技术分享
代码:

<input class="texts one Wdate"
id="StartTime_date" name="StartTime_date"  value="${task.startTime_date}"
onclick="WdatePicker({dateFmt:‘yyyy-MM-dd‘,isShowClear:true,readOnly:true,maxDate:‘#F{$dp.$D(\‘StopTime_date\‘)}‘,onpicked:pickedFunc})" /> 
<script> 
    function pickedFunc(){
        var updateFlag = $.trim($("input[name=‘updateFlag‘]").val());//页面修改操作
        if ($dp.cal.currFocus.id == "StartTime_date") {
            $dp.$(‘StartTime_date‘).value=$dp.cal.getP(‘y‘)+"-"+$dp.cal.getP(‘M‘)+"-"+$dp.cal.getP(‘d‘);
            if (updateFlag == "false") {// 只有添加操作才实行联动,时间自动填充为当前时间
                $dp.$(‘StartTime_hour‘).value=$dp.cal.date.H;
                $dp.$(‘StartTime_second‘).value=$dp.cal.date.m;
            }
        }
    }
</script>

2、选择时间段,一次选择多个时间
实现方式:做一个hidden的input,每次将值加到要显示的input框中。
技术分享

<td class="t">特定时间段:</td>
<td><input id="Run_times" class="texts" name="Run_times"  value="${task.run_times}" 
onclick="$(‘#wdateimg‘).click();"/>
<input id="tempTime" type="hidden"/>
<span class="t" style="padding-top:5px"><img id="wdateimg" 
    onclick="WdatePicker({el:‘tempTime‘,dateFmt:‘yyyy-MM-dd HH:mm:ss‘,isShowClear:false,
    readOnly:false,minDate:‘#F{$dp.$D(\‘Run_times\‘)}‘,onpicked:pickedFunc})"
    src="${webRoot}/js/datePicker/skin/datePicker.gif" width="16" height="22"></span>
<span class="Type">&nbsp;</span><span class="Notes">时间段之间隔用;隔开</span>
</td>
<script> 
    function pickedFunc(){
        if ($dp.cal.currFocus.id == "tempTime") {
             $dp.$(‘Run_times‘).value+=$dp.$(‘tempTime‘).value+";";
        }
    }
</script>

WdatePicker日历控件使用方法

标签:

原文地址:http://blog.csdn.net/wuseyukui/article/details/44275597

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!