Jquery datepicker在更新面板中不起作用 [英] Jquery datepicker is not working in update panel

问题描述

我试图在下面的控件上调用jquery

 <   input     type   =  text    name   =  hearingDate1    id   =  hearingDate1    size   =  8    class   = 表单控件    /  >  

但由于更新面板无效。

如果我删除更新面板然后工作正常。



我尝试过：

< script type =   text / javascript > 
 
 $（ document ）。ready（ function （e）{
 $（ ＃clockpick，＃hearingTime）。clockpick（{
 valuefield： '  hearingTime' 
}）; 
 $（' ＃hearingDate'）。datepick（{firstDay： 1 ，dateFormat ：'  dd / mm / yyyy'，defaultDate： false ，selectDefaultDate： true ，
 minDate：'  0'，maxDate：'  + 40d'，
渲染器：$ .extend（{}，$ .datepick.defaultRenderer，
 {picker：$ .datepick.defaultRenderer.picker。 
 replace（/ \ {link：clear\} /，'  {button：clear}'< /跨度>）。 
 replace（/ \ {link：close \} /，'  {button：close}'）
}），
 showTrigger：' ＃imgDate' 
}）; 
}）; 
 
 $（ document ）。ready（ function （e）{
 $（ ＃clockpick1，＃hearingTime1）。clockpick（{
 valuefield： '  hearingTime1' 
}）; 
 $（' ＃hearingDate1'）。datepick（{firstDay： 1 ，dateFormat ：'  dd / mm / yyyy'，defaultDate： false ，selectDefaultDate： true ，
 minDate：'  0'，maxDate：'  + 40d'，
渲染器：$ .extend（{}，$ .datepick.defaultRendere r，
 {picker：$ .datepick.defaultRenderer.picker。 
 replace（/ \ {link：clear\} /，'  {button：clear}'< /跨度>）。 
 replace（/ \ {link：close \} /，'  {button：close}'）
}），
 showTrigger：' ＃imgDate1' 
}）; 
}）; 
 
< / script> 

< asp：UpdatePanel ID =UpdatePanel1runat =serverUpdateMode =Conditional>

< contenttemplate>

< asp：Label ID =lblreqdetailsrunat =serverText =Request Details：> ;

< div class =runat = serverid =divSummonforpartiesvisible =false>

*

输入日期和时间：

< input type =textname =hearingDate1id =hearingDate1size =8class =form-control/>

< img src =../ Images / calendar.gifalt =popup1id =imgDate1class =trigger datepick-trigger/>

< input type =textname =hearingTime1id =hearingTime1size =8style =margin-left：20px

class =form-control/>

< img id =clockpick1width =20height =20src =../ Images / clock.gifalt =pop1/>

< div class =rowrunat =serverid =divReschedulevisible =false>

*

输入日期和时间：

< input type =textname = hearDateid =Text1size =8class =form-control/>

< img src =../ Images / calendar.gifalt =popup1id =img1class =trigger datepick-trigger/>

< input type =textname =hearingTimeid =Text2size =8style =margin-left：20px

class =form-control/>

< img id =Img2width =20height = 20src =../ Images / clock.gifalt =pop1/>

< asp：Button ID =btn_submitrunat =serverText =SubmitOnClick =btn_submit_Click

CssClass =btn btn-success/>

< triggers> < asp：PostBackTrigger ControlID =btn_submit/>

解决方案

（ document ）。ready（ function （e） {

（ ＃clockpick，＃hearingTime）。 clockpick（{
valuefield：' hearingTime'
}）;

（' ＃hearingDate'）。datepick（{firstDay： 1 ，dateFormat：' dd / mm / yyyy'，defaultDate： false ，selectDefaultDate： true ，
minDate：' 0'，maxDate：' + 40d'，
渲染器：

i m trying to call jquery on below control

<input type="text" name="hearingDate1" id="hearingDate1" size="8" class="form-control" />

but its not working due to update panel.
if i remove update panel then its working fine.

What I have tried:

<script type="text/javascript">

        $(document).ready(function (e) {
            $("#clockpick,#hearingTime").clockpick({
                valuefield: 'hearingTime'
            });
            $('#hearingDate').datepick({ firstDay: 1, dateFormat: 'dd/mm/yyyy', defaultDate: false, selectDefaultDate: true,
                minDate: '0', maxDate: '+40d',
                renderer: $.extend({}, $.datepick.defaultRenderer,
        { picker: $.datepick.defaultRenderer.picker.
            replace(/\{link:clear\}/, '{button:clear}').
            replace(/\{link:close\}/, '{button:close}')
        }),
                showTrigger: '#imgDate'
            });
        });

        $(document).ready(function (e) {
            $("#clockpick1,#hearingTime1").clockpick({
                valuefield: 'hearingTime1'
            });
            $('#hearingDate1').datepick({ firstDay: 1, dateFormat: 'dd/mm/yyyy', defaultDate: false, selectDefaultDate: true,
                minDate: '0', maxDate: '+40d',
                renderer: $.extend({}, $.datepick.defaultRenderer,
        { picker: $.datepick.defaultRenderer.picker.
            replace(/\{link:clear\}/, '{button:clear}').
            replace(/\{link:close\}/, '{button:close}')
        }),
                showTrigger: '#imgDate1'
            });
        });

    </script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<contenttemplate>

<asp:Label ID="lblreqdetails" runat="server" Text="Request Details:">

<div class="" runat="server" id="divSummonforparties" visible="false">

*
Enter Date and Time:

<input type="text" name="hearingDate1" id="hearingDate1" size="8" class="form-control" />

<img src="../Images/calendar.gif" alt="popup1" id="imgDate1" class="trigger datepick-trigger" />

<input type="text" name="hearingTime1" id="hearingTime1" size="8" style="margin-left: 20px"
class="form-control" />

<img id="clockpick1" width="20" height="20" src="../Images/clock.gif" alt="pop1" />

<div class="row" runat="server" id="divReschedule" visible="false">

*
Enter Date and Time:

<input type="text" name="hearingDate" id="Text1" size="8" class="form-control" />

<img src="../Images/calendar.gif" alt="popup1" id="img1" class="trigger datepick-trigger" />

<input type="text" name="hearingTime" id="Text2" size="8" style="margin-left: 20px"
class="form-control" />

<img id="Img2" width="20" height="20" src="../Images/clock.gif" alt="pop1" />

<asp:Button ID="btn_submit" runat="server" Text="Submit" OnClick="btn_submit_Click"
CssClass="btn btn-success" />

<triggers> <asp:PostBackTrigger ControlID="btn_submit" />

解决方案

(document).ready(function (e) {

("#clockpick,#hearingTime").clockpick({ valuefield: 'hearingTime' });

('#hearingDate').datepick({ firstDay: 1, dateFormat: 'dd/mm/yyyy', defaultDate: false, selectDefaultDate: true, minDate: '0', maxDate: '+40d', renderer:

这篇关于Jquery datepicker在更新面板中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！