2013-11-21 101 views
0

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

回答

0
$().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" />

+0

,谢谢,我试过了,但还在做同样的事情。由于某种原因,它不喜欢当我点击设施文本框第一,但日期选择器将正常工作,如果我不点击任何其他文本框。 – moe

+0

请参阅更新的答案,并告知是否有任何结果。 – BBekyarov

+0

它看起来不起作用后,页面发布包,但它只能在第一次,当发布后组件时,它不起作用。我必须刷新页面或点击f5以使日期选择器再次工作。谢谢 – moe

相关问题