设置默认日期引导日期选择器

Posted 2023-05-07

【中文标题】设置默认日期引导日期选择器

【英文标题】：Set Default Date Bootstrap Datepicker

【发布时间】：2014-03-19 21:20:31

【问题描述】：

如何在 Bootstrap Datepicker 中设置默认日期？

我想设置一个日期：24/12/2006

当我打开日期选择器时，它应该在日历上显示这个日期选择。

代码：

$(function()


    $('#dob').datepicker(
    
        <!--viewMode: "years",-->
        onRender: function(date) 
        
         //return date.valueOf() > now.valueOf() ? 'disabled' : '';
               
    
    );
);

这是一个小提琴：

http://jsfiddle.net/ymp5D/204/

【参考方案1】：

你可以这样做：

$('#dob').datepicker('setDate', new Date(2006, 11, 24));
$('#dob').datepicker('update');
$('#dob').val('');

Fiddle Demo

【讨论】：

我有更多参数可以添加它们吗？喜欢：

或者只是

这不适用于从 div 而不是输入元素创建的内联日期选择器。 fiddle

此解决方案中的前两行代码对我有用。我很惊讶 initialDate 单独不起作用。

嘿...！对于设置为选定的多个日期，我该怎么办...？

【参考方案2】：

以上接受的解决方案已过时，为了帮助拥有最新文件的其他人，如果您有版本 4 或更高版本，并且您想调用方法，这里是引导 datetimepicker 方法的示例：

$('#eventDate').data("DateTimePicker").date(moment(date).format('YYYY-MM-DD'));

bootstrap.datetimepicker 格式选项示例：

 $('#eventDate').datetimepicker( format: 'YYYY-MM-DD' );

更多信息请参见此处（但没有有效示例 :)）： http://eonasdan.github.io/bootstrap-datetimepicker/Options/

【讨论】：

当我这样做时，我收到一个 JS 错误，上面写着“TypeError: $(...).data(...).date is not a function”。这仅适用于特定版本吗？

【参考方案3】：

如果您想进行全局更改，请在 bootstrap-datepicker.js 中查找以下内容：

function UTCToday()
var today = new Date();
return UTCDate(today.getFullYear(), today.getMonth(), today.getDate());

并在您的日期中添加硬编码，例如：

function UTCToday()
var today = new Date();
return UTCDate(2006, 00, 01);

将于 2006 年 1 月 1 日开放。 请注意，由于某种原因，一月是“00”而不是“01”。

【参考方案4】：

经过长时间的搜索后，这对我有用，此解决方案适用于 Bootstrap datetimepicker 版本 4。当您必须在输入字段中设置默认日期时。

html

"input type='text' class="form-control" id='datetimepicker5' placeholder="Select to date" value='<?php echo $myDate?>'// $myDate is having value '2016-02-23' "

注意 - 如果您使用 php 进行编码，那么您可以使用 php 设置输入日期字段的值，但是当您应用 datetimepicker() 函数时，datetimepicker 会将其设置回当前日期。所以为了防止它，使用给定的JS代码

javascript

<script>
$('#datetimepicker5').datetimepicker(
    useCurrent: false, //this is important as the functions sets the default date value to the current value 
    format: 'YYYY-MM-DD'
);
</script>

【讨论】：

我试过这个，但是当使用清除按钮时，即使文本是空的，值属性也会保持填充。

【参考方案5】：

在我的版本中，如果您将 val 放入输入中，日历会自动更新。

$('#birthdate').val("01/01/2001");

【参考方案6】：

我不想在设置为默认日期时触发 changeDate 事件，所以我使用了

$('#calendarDatePicker').data("date", new Date());

然后实例化日期选择器

$('#calendarDatePicker').datepicker();

【参考方案7】：

我想在启动时设置一个日期，但上面提到的方法不起作用。 显示了日期，但是当我单击对象时，没有选择日期。

所以我所做的是检索库的 Datepicker 对象，并对其应用 _setDate 方法：

$('#dob').data("datepicker")._setDate(date);

但要使其正常工作，日期对象必须在 UTC 时间的午夜，所以在我这样做之前：

var date = new Date();
date.setUTCHours(0,0,0,0);

然后它起作用了。

【参考方案8】：

您可以简单地分配一个值（与您一起输入标签，它应该可以工作

<input type="text" class="form-control" value="22-05-2017">

【讨论】：

我试过这个，但是当使用清除按钮时，值属性保持填充状态。

【参考方案9】：

解决方法：

<div class="form-group">
  <input type="text" class="form-control datepicker" name="arrivalDate" id="datepicker_arrival">
</div>

所以在你的 js 中添加这个：

$('.datepicker').datepicker(
   language: 'fr',
   todayHighlight: true,
   orientation: "bottom auto",
   startDate: "today",
   autoclose: true,
);
$('#datepicker_arrival').datepicker('setDate', new Date('2020/04/04'));