Jquery日期选择器在gridview更新面板中不起作用答案

【问题标题】：Jquery date picker not working inside gridview Update panelJquery日期选择器在gridview更新面板中不起作用
【发布时间】：2014-10-29 06:45:49
【问题描述】：

我想在日历点击的 Gridview 项目模板上显示日历。为此，我使用 Jquery 日期选择器。但如果 gridview 不在更新面板内，Jquery 日期选择器工作正常。但由于 Gridview 在更新面板内，Jquery 日期选择器不工作。请建议。

<script src="/scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.dynDateTime.min.js"
type="text/javascript"></script>
<script src="/scripts/calendar-en.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $jq141 = $.noConflict(true);
</script>
<script type="text/javascript">
$jq141(document).ready(function () {
    $jq141(".Calender").dynDateTime({
        showsTime: true,
        ifFormat: "%d-%b-%Y ",
        daFormat: "%l;%M %p, %e %m,  %Y",
        align: "BR",
        electric: false,
        singleClick: false,
        displayArea: ".siblings('.dtcDisplayArea')",
        button: ".next()"
    });
});

<asp:UpdatePanel ID="UPUpdate" runat="server">
                        <ContentTemplate>
                            <asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false" Width="100%"
                                CssClass="grid-view" OnRowDataBound="OnRowDataBound">
                                <AlternatingRowStyle CssClass="alternate" />
                                <RowStyle CssClass="normal" />
                                <HeaderStyle CssClass="header" />
                                <Columns>


                                    <asp:TemplateField HeaderText="DOB" ItemStyle-Width="15%">
                                        <ItemTemplate>
                                            <asp:TextBox ID="txtDOB" Text='<%# Eval("DOB", "{0:dd-MMM-yyyy}")%>'
                                                runat="server" Width="80px" class="Calender"></asp:TextBox>
                                            <img src="/_layouts/images/ITEVENT.PNG" />
                                        </ItemTemplate>
                                    </asp:TemplateField>

                            </asp:GridView>
                            <div id="Div1" style="padding: 2px; float: right" runat="server">
                                <asp:Button ID="btnSave" runat="server" Text="Save" align="right" OnClick="btnSave_Click" />
                                <input type="button" class="btnClose" value="Cancel" id="btnclose" />
                                <asp:Button ID="btnRefesh" runat="server" Text="RefeshSPDRDD" OnClick="btnRefesh_Click"
                                    Visible="false" />
                            </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnSave" />
                            <asp:AsyncPostBackTrigger ControlID="btnRefesh" />
                        </Triggers>
                    </asp:UpdatePanel>

【问题讨论】：

class="Calender" 或 CssClass="Calender" ???
使用 LIKE 选择器 使用 Jquery

标签： c# jquery asp.net gridview

【解决方案1】：

试试这个

<script type="text/javascript">
        $(function () {
            $("[id$=txtDOB]").datepicker({
                showOn: 'button',
                buttonImageOnly: true,
                buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif'
            });
        });
     </script>

或

$jq141(document).ready(function () { $jq141("[id$=txtDOB]").dynDateTime({ showsTime: true, ifFormat: "%d-%b-%Y ", daFormat: "%l;%M %p, %e %m, %Y", align: "BR", electric: false, singleClick: false, displayArea: ".siblings('.dtcDisplayArea')", button: ".next()" }); });

你只需要改变这个：$jq141("[id$=txtDOB]").dynDateTime(...)

【讨论】：

【解决方案2】：

这解决了我的问题

<script type="text/javascript">
var $jq141 = $.noConflict(true);

<script type="text/javascript">

function DocumentReadyCalenderMethods() {

    $jq141(document).ready(function () {
        $jq141(".Calender").dynDateTime({
            showsTime: true,
            ifFormat: "%d-%b-%Y ",
            daFormat: "%l;%M %p, %e %m,  %Y",
            align: "BR",
            electric: false,
            singleClick: true,
            displayArea: ".siblings('.dtcDisplayArea')",
            button: ".next()"
           // autoClose: true
        });
    });

}


function pageLoad(sender, args) {
    if (args.get_isPartialLoad()) {
        DocumentReadyCalenderMethods();
    }
}

【讨论】：