回发后多日期选择器无法正常工作

Question

I have a multi-select datepicker that working properly in first attempt but after the post-back datepicker are not showing. Can anyone help me with this? I tried searching for a solution but so far no one come up with my issue.

CSS CODE

.ui-datepicker {
width: 14em;
display: none;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
position: absolute;
top: 1px;
width: 1.8em;
height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px;
    background: url('../images/prev.png')right no-repeat;
    background-size: 12px;
    text-indent: -999px;
    z-index: 1;
}

.ui-datepicker .ui-datepicker-prev:hover {
    background: url('../images/prev.png')right no-repeat;
    background-size: 15px;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px;
    background: url('../images/next.png') left no-repeat;
    background-size: 12px;
    text-indent: 999px;
    z-index: 1;
}

.ui-datepicker .ui-datepicker-next:hover {
    background: url('../images/next.png') left no-repeat;
    background-size: 15px;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
    border-radius: 10px;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1px;
    margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month-year {
    width: 90%;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 49%;
}

.ui-datepicker table {
    width: 100%;
    font-size: .7em;
    border-collapse: ; margin: 0 0 .4em;
    background: #fff;
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: .5em;
    text-align: right;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width: auto;
    overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
} /* RTL support */.ui-datepicker-rtl {
    direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl       .ui-datepicker-group {`
    float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px;
} /* Component containers ----------------------------------*/.ui-widget {
    font-family: Calibri;
    font-size: 15px;
}

.ui-widget-content {
    border: 1px solid #4DB8FF;
    color: #47A3FF;
}

.ui-widget-header {
    border: 1px solid #66CCFF;
    background: #4DB8FF;
    color: #FFFFFF;
    font-weight: bold;
}

.ui-widget-header a {
    color: #222222;
} /* Interaction states ----------------------------------*/.ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}

.ui-state-default:hover , .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    border: 1px solid #999999;
    background: #dadada 50% 50% repeat-x;
    font-weight: normal;
    color: #212121;
}

.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited {
    color: #212121;
    text-decoration: none;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #4DB8FF;
    background: #4DB8FF  50% 50% repeat-x;
    font-weight: normal;
    color: #fff;
} /* Interaction Cues ----------------------------------*/.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #fcefa1;
    background: #fbf9ee 50% 50% repeat-x;
    color: #363636;
}

Here's what i have so far

    <link href = "../css/mdp.css" rel = "Stylesheet" />
    <asp:TextBox ID="datepicker" runat="server" AutoPostBack = "true" ></asp:TextBox>

     <!-- loads jquery and jquery ui -->
        <!-- -->
         <!-- // <script type="text/javascript" src="../js/jquery-ui-1.11.1.js"></script> -->
        <!-->
        <script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.11.1.js"></script>
        <!-- -->

        <script src="../js/bootstrap.min.js"></script>
        <script type = "text/javascript" src = "../js/script.js"></script>
        <script type = "text/javascript" src = "../js/jquery-ui.multidatespicker.js"></script>
        <script type="text/javascript">
        $(function() {
            $('#datepicker').multiDatesPicker();
        });
        </script>

Answer 1

Instead of using

$('#datepicker')....

Use

$('#<%= datepicker.ClientID %>')..

Read this How to stop ASP.NET from changing IDs in order to use jQuery

$(function() {
    $('#<%= datepicker.ClientID %>').multiDatesPicker();
});

Hope that you have already included a version of jquery before using it/bootstrap.

Or you can use class to call your multiDatesPicker .