Question

我的视图中有一个简单的模态，带有一个datepicker输入字段。我从堆栈溢出的答案中得到了一些指示，但是我仍然没有工作，我也不知道为什么。

以下是我的asp.net mvc视图中的脚本部分：

function(BSTR* opbstrValue)
{
    _bstr_t sepStr = SysAllocString(_T("#"));

    wchar_t temp_str[20]; // we assume that the maximal string length for displaying int can be 10
    itow_s(imgFrameIdentity.m_nFrameId, temp_str, 10);
    BSTR secondStr = SysAllocString(temp_str);
    _bstr_t secondCComStr; 
    secondCComStr.Attach(secondStr);

    _bstr_t wholeStr = sepStr + secondCComStr;

    *opbstrValue = wholeStr.Detach();
}

这是模态：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">

    $('#mdl').on('click', function () {
       var parent = $(this).closest('.jumbotron');
       var name = parent.find('input[name="NAME_OF_MODEL"]').val();
       var id = parent.find('input[name="ID_OF_MODEL"]').val();
       console.log(id);
       //var titleLocation = $('#myModal').find('.modal-body'); modal - title
       var titleLocation = $('#myModal').find('.modal-title');
       titleLocation.text(name);

       // for each information you'll have to do like above...

       $('#myModal').modal('show');

     });
});

    $(function () {
        $('.date-picker').datepicker();
    })


</script>

任何帮助将不胜感激。

Answer 1

您的问题与图书馆的顺序有关：

更改订单：

的jquery-ui.css
的jquery-ui.min.js
jquery.min.js

为：

jquery.min.js
的jquery-ui.css
的jquery-ui.min.js

结果是：

＆＃13;

$(function () {

  $('#mdl').on('click', function () {
    var parent = $(this).closest('.jumbotron');
    var name = parent.find('input[name="NAME_OF_MODEL"]').val();
    var id = parent.find('input[name="ID_OF_MODEL"]').val();
    console.log(id);
    //var titleLocation = $('#myModal').find('.modal-body'); modal - title
    var titleLocation = $('#myModal').find('.modal-title');
    titleLocation.text(name);

    // for each information you'll have to do like above...

    $('#myModal').modal('show');

  });
  $('.date-picker').datepicker();

});

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button class="btn" id="mdl">Click Me</button>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
                <input class='date-picker'/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

必须要做的事情：

将此添加到您的CSS：

.datepicker-panel {
   z-index: 9999 !important; /* has to be larger than 1050 */
}
.datepicker-container {
   z-index: 9999 !important; /* has to be larger than 1050 */
}

将此添加到您的js

  $('#datepicker').datepicker({
    container: '#my-modal',
  });

Datepicker在bootstrap模式中不会打开

2 个答案: