bootstrap datepicker 可以选择时分秒吗

Posted 2023-04-01

bootstrap datepicker 可以选择时分秒的。

DatePicker支持鼠标点选日期，同时还可以通过键盘控制选择：

1.page up/down - 上一月、下一月。

2.ctrl+page up/down - 上一年、下一年。

3.ctrl+home - 当前月或最后一次打开的日期。

4.ctrl+left/right - 上一天、下一天。

5.ctrl+up/down - 上一周、下一周。

6.enter - 确定选择日期。

7.ctrl+end - 关闭并清除已选择的日期。

8.escape - 关闭并取消选择。

参考技术A datepicker 不支持时分秒，datetimepicker 支持时分秒 参考技术B 首先，不管是datepicker还是datetimepicker，都是bootstrap爱好者编写的，并不是twitter官方提供的。 你想设置默认时间，其实使用value属性就可以了，这与datetimepicker无关，只是input本身的属性： $('#dp2').datetimepicker ();以上会使默认...

React bootstrap datepicker - 自定义

【中文标题】React bootstrap datepicker - 自定义

【英文标题】：React botstrap date picker - customization

【发布时间】：2019-12-13 02:33:06

【问题描述】：

我正在尝试通过以下方式自定义react-bootstrap-daterangepicker：

我想在选择范围内的日期时使用不同的背景颜色，并且当用户只在悬停以选择日期时。

在下面显示的屏幕截图中，您可以看到当我将鼠标悬停在日期上时，所选范围天为浅蓝色。

相同的背景颜色是当我实际选择所需的范围时，唯一的区别是范围内最后一天的背景颜色：

有没有办法为上述两种状态制作不同的背景颜色？ 问题在于，在这两个州，范围内的日期都有相同的类别：

.in-range

感谢任何帮助！

【参考方案1】：

您可以像这样自定义开始和结束日期的背景颜色：

/* Start Date */
.daterangepicker td.start-date,
.daterangepicker td.start-date.active 
    background-color: #dc3545;


/* End Date */
.daterangepicker td.end-date,
.daterangepicker td.end-date.active 
    background-color: #dc3545;


/* Today (Initial Color) */
.daterangepicker td.today.active 
    background-color: #28a745;

这是demo 和source code。

【讨论】：

感谢您的回答和演示代码，但我的问题有点不同，我想在用户选择时为范围内的天设置两种不同的背景颜色（选择第一天并且用户悬停在结束日期，但不点击它）和选择范围时的不同背景。

【参考方案2】：

观看此example 我看到.start-date 范围内的第一天和.end-date 范围内的最后一天。您可以尝试操作这些类。