Question

我想在日历点击时在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>

Answer 1

试一下

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

OR

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

Answer 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();
    }
}

Jquery日期选择器在gridview Update面板中不起作用

2 个答案: