使用j查询日期选择器只显示月份和年份

Question

我想使用j查询日期选择器只显示月份和年份，但我的问题是日期选择器弹出或仅适用于如果我第一次单击包含日期选择器的文本框，但是如果我先单击其他文本框;然后我尝试点击日期选择器文本框它不起作用。我在这里做错了什么？这里是我的代码：

<asp:TemplateField HeaderText="Select Facility:"> 
        <ItemTemplate> 
         <asp:Label ID="lblFacilityType" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Facility") %>'></asp:Label> 
        </ItemTemplate> 
        <EditItemTemplate> 
         <asp:TextBox ID="txtFacilityType" runat="server" Width="180" Text='<%# DataBinder.Eval(Container, "DataItem.Facility") %>'></asp:TextBox> 
         <asp:Panel ID="Panel1_SR" runat="server" CssClass="popupControl"> 
          <asp:UpdatePanel ID="UpdatePanel1_SR" runat="server"> 
           <ContentTemplate> 
            <asp:RadioButtonList ID="RadioButtonList1_Facility" runat="server" AutoPostBack="true" 
             OnSelectedIndexChanged="FacilityType_SelectedIndexChanged" Width="140px"> 
             <asp:ListItem Text="East"></asp:ListItem> 
             <asp:ListItem Text="South"></asp:ListItem> 
            </asp:RadioButtonList> 
           </ContentTemplate> 
          </asp:UpdatePanel> 
         </asp:Panel> 
         <br /> 
         <ajaxToolkit:PopupControlExtender ID="PopupControlExtender1_SR" runat="server" CommitProperty="value" 
          PopupControlID="Panel1_SR" Position="Bottom" TargetControlID="txtFacilityType"> 
         </ajaxToolkit:PopupControlExtender> 
        </EditItemTemplate> 
       </asp:TemplateField> 
       <asp:TemplateField HeaderText="Select Month/Year:"> 
        <ItemTemplate> 
         <asp:Label ID="lblDate" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Month_Year") %>'></asp:Label> 
        </ItemTemplate> 
        <EditItemTemplate> 
         <asp:TextBox ID="txtInputDate" runat="server" CssClass="date-picker"></asp:TextBox> 
        </EditItemTemplate> 
       </asp:TemplateField> 

，并在这里为日期选择器的脚本

<script type="text/javascript"> 
     $(function() { 
      $('.date-picker').datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       showButtonPanel: true, 
       dateFormat: 'MM yy', 
       onClose: function (dateText, inst) { 
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
        $(this).datepicker('setDate', new Date(year, month, 1)); 
       } 
      }); 
     }); 
</script> 
<style type="text/css"> 
.ui-datepicker-calendar { 
    display: none; 
    } 
</style> 

Answer 1

$().ready(function() { 
      $('.date-picker').mousedown(function() { 
       $('.date-picker').datepicker({ 
        changeMonth: true, 
        changeYear: true, 
        showButtonPanel: true, 
        dateFormat: 'MM yy', 
        onClose: function (dateText, inst) { 
         var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
         var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
         $(this).datepicker('setDate', new Date(year, month, 1)); 
        } 
       }); 
      }); 
     }); 

如何改变这样的代码。在类别“date-picker”的文本框上按下鼠标按钮时，应该触发您的函数。

而且不是这一行<asp:TextBox ID="txtInputDate" runat="server" CssClass="date-picker"></asp:TextBox>添加<input name="txtInputDate" id="txtInputDate" runat="server" class="date-picker" />