开发者

How can a button visible only on given month and date in javascript?

I want a button to be visible only at given date and month otherwise want to hide it. Also want to make the button disable after first click. How can I do this? I have tried following code but it didn't help me.

Javascript:

<script type="text/javascript">
     function today()
        {
        var currentTime = new Date()
        v开发者_运维知识库ar month = currentTime.getMonth() + 1
        var day = currentTime.getDate()
        var d = new Date();
        var curr_hour = d.getHours();
        var curr_min = d.getMinutes();


    if(month==1 && day==1)
{ 
document.getElementById('xx').style.visibility='visible';
}
else
{
document.getElementById('xx').style.visibility='hidden';
}
}
</script>

Html:

<form method=post action="update_registration.jsp" name="form1">
<input type="image" SRC="/Patankar/PNH/images/click_anim.gif"   id="xx"  onClick='today();' ALT="Submit Form" style="visibility:hidden;display:none" >
</form>


Please choose only one display style like visible XOR display. Then

window.onload = function() {

    // you manipulation with date wich set varibale canClick to true if all ok or to false otherwise 

    if (canClick)
    {
       var button = document.getElementById('xx');
      button.style.display = 'block'; //if you choose visibility - button.style.visibility= 'visible';
      button.onclick = function() {this.disabled = false}
    }

}


Use document.getElementById('xx').style.display='none'; or document.getElementById('xx').style.display='block';


If you want disable button after first click it should be like this (using jQuery):

 $('#xx').click(function(){
     $(this).attr('disabled','true');
 }  


I would reccomend using jQuery for any Javascripting as it makes it compatible across all major browsers. Then you can do the following code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">    
    $(document).ready(function () {
        var now = new DateTime();
        var month = 1;
        var day = 1;
        if(now.Month == month && now.Day == day)
        {
            $('#itemToHide').css('display', 'visible');
        }
        else
        {
            $('#itemToHide').css('display', 'hidden');
        }
        $('#itemToHide').click(function () {
            $(this).css('display','hidden');
            $(this).attr('disabled','true');
        }  
    });
</script>

If you put this into the section of your code, give the button you want to hide an id attribute and change the itemToHide in the script above to whatever ID you give to the element

EDIT: You will also need to remove the display:none style from the button.

EDIT: Just added code for hiding it on click.

Hope this helps


    setInterval(function(){
        document.getElementById('abc').style.visibility='hidden';
    }, (new Date(new Date().toDateString())-  new Date(2011, 7, 19) 
/* the date on which button should be hidden*/))

This code will hide button even if page is left open from previous day to the date button should not be visible. Modify the code to reverse the effect.


No jquery needed

whatch this demo it works perfectly: http://jsfiddle.net/enWEM/

In you input you have 2 visibility options (visible and display) use only one

Next you must run the javascript code that is also missing


Your code is really perfect first remove any one id attribute in your input element, you have written two ids which may be confusing the script,

<input type="image" SRC="/Patankar/PNH/images/click_anim.gif"   id="xx"  id="return1" onClick='today();' ALT="Submit Form" style="visibility:hidden;display:none" >

id="xx"  id="return1"

Remove any one and change accordingly in your script and further use display instead of visibility and to disable the button use,

document.getElementById("xx").disabled=true;

Hope this should work.

Regards,
Karthik

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜