Bootstrap datepicker

我想让引导日期选择器突出显示在下拉日期选择器上选择的日期。目前没有这样做..我错过了什么？Bootstrap datepicker

<div class="input-append date" id="datepicker" data-date="dateValue: Customer.DateOfBirth" data-date-format="dd-mm-yyyy"> 
    <input class="span2" size="16" type="text" data-bind="value: Customer.DateOfBirth" readonly="readonly" /> 
    <span class="add-on"><i class="icon-calendar"></i></span> 
</div>

来源

2012-11-14 web-boy

我没有在代码中引用datepicker.css文件。有没有办法让突出显示的日期成为数据绑定日期而不是今天的日期？ –

你必须通过JavaScript $('#datepicker').datepicker();致电日期选择器。

要hightlight选定的日期，只包括datepicker.css

Code Example/Result

更新bootstrap.css

来源

2012-11-14 13:11:43 agriboz

感谢您的回复。我已经有了上面的代码。我开始认为这可能是我使用的bootstrap版本，因为我认为您在小提琴示例中使用了最新版本。 –

我没有在代码中引用datepicker.css文件。有没有办法让突出显示的日期成为数据绑定日期而不是今天的日期？ –

你可以试试'data-date'。例如'数据日期=“2012年12月12日”'它将突出显示2012年12月12日 – agriboz

-1

<linkrel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
<script src="js/bootstrap.min.js" type="text/javascript"></script> 

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="js/bootstrap-datepicker.js" type="text/javascript"></script> 
<script src="js/bootstrap-datepicker.min.js" type="text/javascript"></script> 


<script> 

    $(document).ready(function() { 
     $('#datePicker') 
      .datepicker({ 
       format: 'mm/dd/yyyy' 
      }) 
      .on('changeDate', function(e) { 
       // Revalidate the date field 
       $('#eventForm').formValidation('revalidateField', 'date'); 
      }); 

     $('#eventForm').formValidation({ 
      framework: 'bootstrap', 
      icon: { 
       valid: 'glyphicon glyphicon-ok', 
       invalid: 'glyphicon glyphicon-remove', 
       validating: 'glyphicon glyphicon-refresh' 
      }, 
      fields: { 
       name: { 
        validators: { 
         notEmpty: { 
          message: 'The name is required' 
         } 
        } 
       }, 
       date: { 
        validators: { 
         notEmpty: { 
          message: 'The date is required' 
         }, 
         date: { 
          format: 'MM/DD/YYYY', 
          message: 'The date is not a valid' 
         } 
        } 
       } 
      } 
     }); 
    }); 

</script> 

<div class="form-group"> 
    <div class="date"> 
     <div class="input-group input-append date" id="datePicker"> 
      <input type="text" class="form-control" name="date" /> 
      <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
     </div> 
    </div> 
</div>

这个u必须有引导，datepicker.js &引导-datepicker.min.js files.U也可以调用$（'＃datePicke R'）日期选择器（）;方法，但它有自己的默认设置。所以在脚本标记中我已经在datepicker（）方法中应用了我自己的自定义。然后，我只是在身体标记中定义的div标记中生成一个日期选择器输入组件，但我已经简单地将它记住了。

问题的解决方案是span标签。其中在日期选择器输入组件上应用图标。我选择了一个日历图标，即glyphicon glyphicon-calendar。但在必须告诉浏览器我要通过在用于将图标与文本输入分组的span标记中编写class =“input-group-addon add-on”来嵌入图标。

来源

2016-04-23 16:08:27

请不要只是转储一些代码，但也要解释你做了什么 –

Bootstrap datepicker

回答

相关问题