All geek questions in one place

Dynamically disable jQuery Datepicker icon

I am new to jQuery and now I am looking for a decent free datpicker. I am quite pleased with the jQuery UI datepicker, but I am trapped. The project in which I use this requires an icon next to the text box. Although it’s pretty easy, I don’t know how to dynamically disable the icon.

There are two things that interest me:

  • How can I dynamically change the disabled datepicker status from code so that it fires on postback?

  • Is it possible to disable the status depending on the text field to which it is attached? (i.e., if

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

then datepicker also shuts down.

This is the code I used for datepicker.

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

Well, if you are using the jquery UI datepicker, why not use the built-in disable command? Therefore, in response to a message, you simply turn it off.

Of course, the text box will also be disabled, but I assume you want this too.

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

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

Here's how to disable a field as soon as a message appears. I don’t understand if you want this to happen immediately after entering something in the text box 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 for

 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; } }
+9
source

To disable the image, you only need this command:

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

and for inclusion:

 $("#textWithoutDatePicker").datepicker("enable")
+2
source

Ok, I'm not sure if I understood you correctly, but you want to show the same image for datepicker, but this image cannot be correctly clicked?

So instead:

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

You should do something like this:

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

To help you, it would be better if there was a class in your text field that determines what behavior you are going to use for this text field.

0
source

I really like the Kelvin date picker, I recently changed it using jQueryUI

http://www.kelvinluck.com/projects/jquery-date-picker/

0
source

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

0
source

Source: https://habr.com/ru/post/1302194/

More articles:


All Articles