jquery.style.display实现显示隐藏+时间选择效果

1、http://www.my97.net/dp/demo/index.htm

一个很好的时间控件,可以下载其js文件,用在开发中非常好用

选择日期从当天开始,第二个框只能选择第一个框中选择日期后的两个月内的日期

<th style="font-size: 14px">有效时间:</th>
                                                        <td colspan="3">
                                                        <input id="timeStart" class="Wdate" type="text" onFocus="WdatePicker({minDate:'%y-%M-%d'})"  name="timeStart" />
                                                        &nbsp;-&nbsp;<input id="timeEnd" name="timeEnd" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'timeStart\')}',maxDate:'#F{$dp.$D(\'timeStart\',{M:2})}'})"/>
                                                        </td>


<td></td><td colspan="2">
        <input id="timeStart" class="Wdate" style="width:100px" type="text" onFocus="WdatePicker({minDate:'%y-%M-%d'})"  name="timeStart" value='<s:date name="startTime" format="yyyy-MM-dd"/>'/>
        &nbsp;-&nbsp;<input id="timeEnd" name="timeEnd" class="Wdate" style="width:100px" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'timeStart\')}',maxDate:'#F{$dp.$D(\'timeStart\',{M:2})}'})" value='<s:property value="endTime"/>'/>
        </td>

2、时间显示处理

<span class="indate">有效期:
                                              
       <s:date name="(startTime.before(endTime))?startTime:endTime" format="yyyy-MM-dd" />
                                         
         至<s:date name="(startTime.before(endTime))?endTime:startTime" format="yyyy-MM-dd"/>
                                                
</span>

3、jquery实现显示隐藏

$("#id").css('display','none');
$("#id").css('display','block');

$("#id")[0].style.display = 'none';

$("#id")返回的是JQuery
它是个集合肯定有display属性

$("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 

2、javascript实现显示隐藏

<script>
function chg(){
if(document.getElementById("sel").value=="txt"){
document.getElementById("txt").style.display="";
document.getElementById("btn").style.display="none";
}else{
document.getElementById("txt").style.display="none";
document.getElementById("btn").style.display="";
}
}
</script>
<html><head></head><body>
<select id="sel" onChange="chg()">
<option value="txt">txt</option>
<option value="btn">btn</option>
</select>
<input type="text" name="txt" id="txt" style="display:none">
<input type="button" name="btn" value="btn" id="btn" style="display:none">
</body>
</html>


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值