引导日期选择器

Posted 2023-05-07

【中文标题】引导日期选择器

【英文标题】：Bootstrap datepicker

【发布时间】：2012-11-02 21:23:48

【问题描述】：

我正在尝试让突出显示在下拉日期选择器上选择的日期。它目前没有这样做..我错过了什么？

<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>

【问题讨论】：

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

【参考方案1】：

您必须通过 javascript $('#datepicker').datepicker();​ 调用日期选择器。

要突出显示所选日期，只需包含datepicker.css

Code Example/Result

更新bootstrap.css

【讨论】：

感谢您的回复。我已经得到了上面的代码。我开始认为这可能是我正在使用的引导程序版本，因为我认为您在小提琴示例中使用的是最新版本。

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

你可以试试data-date。例如data-date="12-12-2012" 它将突出显示 12-12-2012

只是好奇.. 你如何在提琴手中包含 twitter boostrap.js？当我查看您的提琴手示例时，我只看到包含 jquery 而不是 boostrap.js。

我没有包含bootstrap.js。我认为没有必要在这种情况下包含它。

【参考方案2】：

<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>

为此你必须有 bootstrap-datepicker.js 和 bootstrap-datepicker.min.js 文件。你也可以调用 $('#datePicker').datepicker();方法，但它有自己的默认设置。所以在脚本标签中，我在 datepicker() 方法中应用了我自己的自定义。 然后我只是在body标签中定义的div标签中创建了一个日期选择器输入组件，但我已经简单地对其进行了修改。

你的问题的解决方案是跨度标签。哪个 r 在 datepicker 输入组件上应用图标。我选择了一个日历图标，它是 glyphicon glyphicon-calendar。但在它必须告诉浏览器我将通过在用于将图标与文本输入分组的 span 标签中写入 class="input-group-addon add-on" 来嵌入图标之前。

【讨论】：

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