回发后多日期选择器不起作用

Posted 2023-05-09

【中文标题】回发后多日期选择器不起作用

【英文标题】：Multi Datepicker not working after postback

【发布时间】：2015-02-03 07:01:06

【问题描述】：

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

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>

【问题讨论】：

我认为是js的问题，你需要展示你的代码。

遇到任何控制台错误？？？

@RohanKumar 这就是我所拥有的。其实它是一个插件。如果还可以，请查看链接。谢谢 =)

@Kartikeya 不。但是发生的事情是每次它的回发日期选择器没有显示，但是当我第一次加载它时。在回发发生之前一切正常。

你在做 ajax post-back 吗？发布那部分代码..

【参考方案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。