CODEWITHSUNDEEP
asp.netjquery-uidatepicker
Jonn
Jonn

Reputation: 4661

Dynamically disable jQuery Datepicker Icon

I'm fairly new to jQuery and I've been looking for a decent free datepicker for a while now. I am quite satisfied with jQuery UI's datepicker but I've hit a snag. The project where I'm using this requires that I have an icon beside the textbox. While this is fairly easy, I don't know how to dynamically disable the icon.

There are two things I'm interested in knowing:

  1. How can I dynamically change the disabled status of the datepicker from code-behind so that it triggers on postback?

  2. Is it possible to make it's disabled status dependent on the textbox that it is attached to? (i.e. if

    <asp:TextBox Id="txtMyTextBox" Enabled="false">

then datepicker gets disabled as well.

This is the code I've been using for the datepicker.

<script type="text/javascript">
    $(function() {
        $("*[id$='txtMyTextBox']").datepicker({
            changeMonth: true,
            changeYear: true,
            showOn: 'button',
            buttonImage: '/images/icon-calendar.gif',
            buttonImageOnly: true
        });
    });
</script>

Upvotes: 5

Views: 34355

Answers (4)

Nelson Navarro
Nelson Navarro

Reputation: 31

To disable the picture you only need this command:

$("#textWithoutDatePicker").datepicker("disable")

and for enable:

$("#textWithoutDatePicker").datepicker("enable")

Upvotes: 3

David L
David L

Reputation: 1138

if someone is trying to HIDE the button next to the date picker, use the option: 'showOn':'focus' in the object you send to the constructor when calling the Datepicker object. Watch here: http://api.jqueryui.com/datepicker/#option-showOn

Upvotes: 0

chobo2
chobo2

Reputation: 85765

Well if your using the jquery U.I datepicker why not use the built in disable command? So on post back you just disable it.

Of course the textbox will be disabled as well but I am assuming that's what you want too.

// jquery ui has a built in icon that shows up automatically http://jqueryui.com/demos/datepicker/#icon-trigger

// how to disable jquery ui. http://jqueryui.com/demos/datepicker/#method-disable

Here is how to disable the box once a post back happens. I am not clear if you want this to happen right after they enter something in the textbox or not though.

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="ui.all.css" rel="stylesheet" type="text/css" />
        <link href="ui.core.css" rel="stylesheet" type="text/css" />
    <link href="ui.datepicker.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>


    <script type="text/javascript">
        $(function()
        {

            $("#txtMyTextBox").datepicker({ showOn: 'button', buttonImage: 'images/calendar.gif', buttonImageOnly: true });
            var disabled = $('#txtMyTextBox').attr('disabled');
            if (disabled == true)
            {
                $("#txtMyTextBox").datepicker('disable');
            }
            else
            {
                $("#txtMyTextBox").datepicker('enable');
            }


        });


</script>



</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtMyTextBox" runat="server" Enabled="false"></asp:TextBox>
        <asp:Button ID="enable" runat="server" Text="enable" onclick="enable_Click" 
            style="width: 56px" />
        <asp:Button ID="disable" runat="server" Text="disable" 
            onclick="disable_Click" />

    </div>

    </form>
</body>
</html>

code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page 
{


    protected void enable_Click(object sender, EventArgs e)
    {
        txtMyTextBox.Enabled = true;
    }
    protected void disable_Click(object sender, EventArgs e)
    {
        txtMyTextBox.Enabled = false;
    }
}

Upvotes: 11

thitemple
thitemple

Reputation: 6059

Ok, I'm not sure if I understood you right, but you want to show the same image for the datepicker but that image can't be clickable right?

So instead of doing this:

$(".textWithDatePicker").datepicker.....

You should do something like this:

$(".textWithoutDatePicker").after("<img src='datePickerImage.png' />");

To help you out, it would be better if your text box had a class identifying which behavior you are intending for that textbox.

Upvotes: 0

Related Questions