2010-02-24 4 views
4

Je suis assez nouveau à jQuery et j'ai cherché un datpicker décent libre pendant un moment maintenant. Je suis assez satisfait de la datepicker de jQuery UI mais j'ai rencontré un problème. Le projet dans lequel j'utilise cela nécessite que j'aie une icône à côté de la zone de texte. Bien que ce soit assez facile, je ne sais pas comment désactiver dynamiquement l'icône.Désactiver dynamiquement jQuery Datepicker Icône

Il y a deux choses que je suis intéressé à savoir:

  1. Comment puis-je changer dynamiquement le statut de personne handicapée du datepicker de code-behind afin qu'il déclenche lors de la publication?
  2. Est-il possible de rendre son statut désactivé en fonction de la zone de texte à laquelle il est attaché? (Si

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

puis datepicker obtient ainsi désactivé.

C'est le code que je l'ai utilisé pour le datepicker.

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

Répondre

9

Eh bien si vous utilisez la jquery U.I. datepicker pourquoi ne pas utiliser la commande interne désactiver? Donc, au retour, il vous suffit de le désactiver.

Bien sûr, la zone de texte sera désactivée, mais je suppose que c'est ce que vous voulez aussi.

// jquery ui a construit dans l'icône qui apparaît automatiquement http://jqueryui.com/demos/datepicker/#icon-trigger

// comment désactiver jquery ui. http://jqueryui.com/demos/datepicker/#method-disable

Voici comment désactiver la boîte une fois qu'un post-retour a lieu. Je ne sais pas si vous voulez que cela se produise juste après avoir entré quelque chose dans la zone de texte ou non.

Par défaut.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

derrière

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; 
    } 
} 
+0

C'est exactement le type de comportement que je recherchais. J'ai déjà examiné les méthodes de désactivation. Désolé, aurait dû être plus précis. Je ne sais pas comment appeler la méthode de désactivation jQuery à partir du code-behind afin qu'il soit désactivé lors de la publication. – Jonn

+0

S'il vous plaît voir mon edit – chobo2

+0

Merci! Ceci est exactement ce que je cherchais. – Jonn

0

Ok, je Je ne sais pas si je vous ai bien compris, mais vous voulez montrer la même image pour la datepicker mais cette image ne peut pas être cliquable droite?

Ainsi, au lieu de le faire:

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

Vous devriez faire quelque chose comme ceci:

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

Pour vous aider, il serait mieux si votre zone de texte avait une classe d'identifier quel comportement vous êtes l'intention pour cette zone de texte.

0

je tout à fait comme le sélecteur de date de kelvin chance, j'ai récemment changé pour elle de celui jQueryUI

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

+0

Bien que ce lien peut répondre à la question, il est préférable d'inclure l'essentiel parties de la réponse ici et fournir le lien pour référence. Les réponses avec lien uniquement peuvent devenir invalides si la page liée change –

0

si quelqu'un tente de cacher le bouton à côté du sélecteur de date, utilisez l'option: « showOn »: « focus » dans l'objet que vous envoyez au constructeur lors de l'appel de l'objet Datepicker. Regardez ici: http://api.jqueryui.com/datepicker/#option-showOn

2

Pour désactiver l'image que vous avez seulement besoin de cette commande:

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

et pour permettre:

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