动态禁用 jQuery Datepicker 图标
Posted
技术标签:
【中文标题】动态禁用 jQuery Datepicker 图标【英文标题】：Dynamically disable jQuery Datepicker Icon 【发布时间】：2011-01-20 08:46:01 【问题描述】：我是 jQuery 的新手，我一直在寻找一个不错的免费日期选择器。我对 jQuery UI 的 datepicker 非常满意，但我遇到了麻烦。我使用它的项目要求我在文本框旁边有一个图标。虽然这相当简单，但我不知道如何动态禁用图标。
有两件事我很想知道：
-
如何从代码隐藏中动态更改日期选择器的禁用状态，以便在回发时触发？
是否可以根据它所附加的文本框使其处于禁用状态？ （即如果
<asp:TextBox Id="txtMyTextBox" Enabled="false">
然后日期选择器也被禁用。
这是我一直用于日期选择器的代码。
<script type="text/javascript">
$(function()
$("*[id$='txtMyTextBox']").datepicker(
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/images/icon-calendar.gif',
buttonImageOnly: true
);
);
</script>
【问题讨论】：
【参考方案1】：如果您使用 jquery U.I datepicker 为什么不使用内置的禁用命令？因此，在回发时，您只需将其禁用即可。
当然文本框也会被禁用，但我假设这也是你想要的。
// jquery ui 有一个自动显示的内置图标 http://jqueryui.com/demos/datepicker/#icon-trigger
// 如何禁用 jquery ui。 http://jqueryui.com/demos/datepicker/#method-disable
这里是在回发发生后如何禁用该框的方法。我不清楚您是否希望在他们在文本框中输入内容后立即发生这种情况。
默认.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>
后面的代码
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;
【讨论】：
这正是我一直在寻找的那种行为。我已经研究了禁用方法。对不起，应该更具体。我不知道如何从代码隐藏中调用 jQuery 禁用方法，以便在回发时禁用它。 谢谢！这正是我想要的。 想知道为什么没有任何关于“禁用”方法的in the api docs（但它有效）【参考方案2】：要禁用图片你只需要这个命令：
$("#textWithoutDatePicker").datepicker("disable")
启用：
$("#textWithoutDatePicker").datepicker("enable")
【讨论】：
【参考方案3】：好的，我不确定我是否理解正确，但您想为日期选择器显示相同的图像，但该图像不能点击，对吗？
所以不要这样做：
$(".textWithDatePicker").datepicker.....
你应该这样做：
$(".textWithoutDatePicker").after("<img src='datePickerImage.png' />");
为了帮助您，如果您的文本框有一个类来识别您打算对该文本框执行哪种行为，那会更好。
【讨论】：
【参考方案4】：我很喜欢 kelvin Luck 的日期选择器，我最近从 jQueryUI 中的那个改成了它
http://www.kelvinluck.com/projects/jquery-date-picker/
【讨论】：
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效【参考方案5】：如果有人试图隐藏日期选择器旁边的按钮，请在调用 Datepicker 对象时在发送给构造函数的对象中使用选项：'showOn':'focus'。在这里观看：http://api.jqueryui.com/datepicker/#option-showOn
【讨论】：
以上是关于动态禁用 jQuery Datepicker 图标的主要内容，如果未能解决你的问题，请参考以下文章
如何在 jquery datepicker 中动态禁用特定日期？
Yii2：如何使用 jQuery 使 <div> 禁用/只读
在 jQuery UI Datepicker 中禁用未来日期