CODEWITHSUNDEEP
jqueryasp.netjquery-plugins
user1321748
user1321748

Reputation:

Jquery Datepicker is not working after page load

I'm using datepicker plugin with two textboxes on an aspx page. when i click on submit, data get saved in database, but now if i again try to update date, datepicker don't work after page load. I'm using following code for this.

<asp:TextBox ID="txtMovingDate" runat="server"
 CssClass="TextBox datepicker" TabIndex="19"></asp:TextBox>


jQuery(function() {
jQuery(".datepicker").datepicker(
{ dateFormat: 'mm/dd/yy', timeFormat: ' hh:ii:ss', 
changeMonth: true, changeYear: true });

Please help me. Thank you.

Upvotes: 1

Views: 1434

Answers (3)

SajeeshC
SajeeshC

Reputation: 61

function pageLoad() {
        $(".datepicker").datepicker();
    }

Hope this will resolve your problem.

Upvotes: 0

FlashTrev
FlashTrev

Reputation: 517

If you have a textbox inside an Updatepanel, to make things a little clearer here is a sample of working code I have (deduced after reading a few varying answers).

in your < head > tag put the following:

<script type="text/javascript">
    $(document).ready(function () {

        $(".startDatepicker").datepicker({
            dateFormat: 'dd/mm/yy',
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 2,
            onClose: function (selectedDate) {
                $(".endDatepicker").datepicker  "option", "minDate", selectedDate);
            }
        });

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

        function EndRequestHandler(sender, args) {
            $(".startDatepicker").datepicker({
                dateFormat: 'dd/mm/yy',
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 2,
                onClose: function (selectedDate) {
                    $(".endDatepicker").datepicker("option", "minDate", selectedDate);
                }
            });
        }
    });  
</script>

then in you < body > code put this:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div class="floatLeft"><asp:TextBox ID="dateFromTxtBox" CssClass="startDatepicker"
        runat="server" Text="02/12/2013" ToolTip="enter a time either in 12 hour clock or 24 hour clock"
        Width="74px" DataFormatString="{0:d}" BorderStyle="Inset"></asp:TextBox>
    </div>
    </ContentTemplate>
</asp:UpdatePanel>

to add an end date or time pickers just copy and paste a new instance of each of the Jquery statements (but NOT the $(doc).ready(){}.. or the function EndRequestHandler(sender, args){}, you only need one of each of these in your script) plus the < asp:textbox... statement.

hope this helps

Upvotes: 0

Dan An
Dan An

Reputation: 424

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {

//you need to duplicate your jquery datapicker function here //in order to use it after post back

});

Upvotes: 1

Related Questions