Динамически отключить иконку jQuery Datepicker - PullRequest
Новая
       8

Динамически отключить иконку jQuery Datepicker

4 голосов
/ 24 февраля 2010

Я довольно новичок в jQuery и некоторое время искал приличный бесплатный сборщик дат. Я вполне доволен выбором даты в jQuery UI, но столкнулся с проблемой. Проект, в котором я использую это, требует, чтобы у меня был значок рядом с текстовым полем. Хотя это довольно просто, я не знаю, как динамически отключить значок.

Мне интересно знать две вещи:

  1. Как я могу динамически изменить отключенный статус средства выбора даты из-за кода, чтобы он срабатывал при обратной передаче?

  2. Можно ли сделать так, чтобы его отключенный статус зависел от текстового поля, к которому он прикреплен? (т.е. если

    <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>

Ответы [ 5 ]

10 голосов
/ 24 февраля 2010

Хорошо, если вы используете указатель даты jquery U.I, почему бы не использовать встроенную команду отключения? Так что на пост обратно вы просто отключите его.

Конечно, текстовое поле также будет отключено, но я предполагаю, что вы тоже этого хотите.

// JQuery UI имеет встроенный значок, который отображается автоматически http://jqueryui.com/demos/datepicker/#icon-trigger

// как отключить jquery ui. http://jqueryui.com/demos/datepicker/#method-disable

Вот как отключить этот флажок, если произошла обратная запись. Мне непонятно, хотите ли вы, чтобы это произошло сразу после того, как они что-то вводят в текстовое поле, или нет.

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>

код позади 

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;
    }
}
2 голосов
/ 11 декабря 2014

Чтобы отключить изображение, вам нужна только эта команда: 

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

и для включения: 

$("#textWithoutDatePicker").datepicker("enable")
0 голосов
/ 20 июня 2014

если кто-то пытается скрыть кнопку рядом со средством выбора даты, используйте параметр: 'showOn': 'focus' в объекте, который вы отправляете конструктору при вызове объекта Datepicker. Смотрите здесь: http://api.jqueryui.com/datepicker/#option-showOn

0 голосов
/ 24 февраля 2010

Мне очень нравится средство выбора даты Кельвина Лака, я недавно перешел на него с того, что есть в jQueryUI

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

0 голосов
/ 24 февраля 2010

Хорошо, я не уверен, правильно ли я вас понял, но вы хотите показать то же изображение для средства выбора даты, но это изображение не может быть активировано, верно?

Так что вместо этого: 

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

Вы должны сделать что-то вроде этого: 

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

Чтобы помочь вам, было бы лучше, если бы в вашем текстовом поле был класс, определяющий, какое поведение вы собираетесь использовать для этого текстового поля.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...