我的日期选择器无效

时间:2017-07-04 07:14:30

标签: jquery css3

以下是我的代码.... 每当我点击输入元素时,日期选择器都不会显示。我哪里错了???我的css n js是错误的还是jquery? js和css之间是否存在歧义?

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-4">Portfolio Date</label>
<div class="col-sm-3">
@*<input class="input-sm" type="text" id="form-field-4" placeholder=".input-sm" />*@
<div class="input-group">
@*@Html.TextBoxFor(model => model.portfolioProjectDate, 
new {@class="form-control", type="text",  placeholder="Portfolio Date", required="required" })*@
<input type='text' id="fiscalYear" name="FiscalYear"  class="form-control" placeholder="Booking Date" />
@*<input id="fiscalYear" name="FiscalYear" type="text" value="6/30/2015 7:12:21 AM">*@

<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
@*<div class="space-2"></div>
<div class="help-block" id="input-size-slider"></div>*@
</div>
</div>
<script>
   $(function () {
      alert("O");
      $("#fiscalYear").datepicker(
      {
         dateFormat: "mm/dd/yy",
         showOtherMonths: true,
         selectOtherMonths: true,
         autoclose: true,
         changeMonth: true,
         changeYear: true,
         //gotoCurrent: true,
       });
     });
</script>

1 个答案:

答案 0 :(得分:0)

尝试初始化datepicker

中的document.ready
$(document).ready(function() {
    $('#fiscalYear').datepicker();
})

请注意,您已包含datepicker库和css,

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">

<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.7.1.js"></script>  
<script src="js/bootstrap-datepicker.js"></script>

如果您的datepicker按此工作,则按配置进行自定义

 $("#fiscalYear").datepicker(

            {
                dateFormat: "mm/dd/yy",
                showOtherMonths: true,
                selectOtherMonths: true,
                autoclose: true,
                changeMonth: true,
                changeYear: true,
                //gotoCurrent: true,
            });