Question

我有一个多选择的日期选择器，在第一次尝试时正常工作但在回显后的日期选择器没有显示之后。谁能帮我这个？我试图寻找解决方案，但到目前为止还没有人提出我的问题。

CSS代码

.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;
}

这是我到目前为止所拥有的

    <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

而不是使用

$('#datepicker')....

使用

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

阅读此How to stop ASP.NET from changing IDs in order to use jQuery

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

希望您在使用/ bootstrap之前已经包含了jquery版本。

或者您可以使用class来致电multiDatesPicker。

多重Datepicker在回发后无法正常工作

1 个答案: