Select 仅来自 UI 的月份和日期。如何从 DateTimePicker 中隐藏年份 - Tempus Dominus Datetime Picker Bootstrap

Question

我有一个案例，我想从 UI 的 select 月和日创建重复任务。一年不需要 select。2 月应该显示 28 天。我正在使用 Bootsrap 构建 UI。我最初考虑考虑下面的选项用于实现相同的

1. 创建一个下拉列表，其中将显示所有月份（即一月、二月、三月..十二月）

2. 创建另一个用于加载天数的下拉列表。(1,2...31)。 应根据月份选择重新加载此下拉列表。

是否可以使用 Tempus-Dominus 日期时间选择器来做同样的事情？ https://getdatepicker.com/5-4/

我已经创建了示例小提琴。我希望在选择后显示类似 (Mar - 31) 的地方。 DateTimepicker 中不应出现年份。（默认情况下将 Year 视为 2022。但它不应显示在 Datetimepicker 中的任何位置。）

      $('#datetimepicker1').datetimepicker({

       format: 'MM-DD'
    });

https://jsfiddle.net/8ck1tanb/1/

任何人都可以建议更好的用户友好设计/方法来实现此功能。 如果您可以共享已经实现的示例代码，那将更有帮助。

Answer 1

您可以使用 tempus-dominus-datetimepicker 事件来拆分月份和年份并仅显示月份。

这是一个示例fiddle 。

   $('#datetimepicker1').on('show.datetimepicker update.datetimepicker change.datetimepicker',function(){
     if(typeof $(this).find('.picker-switch').html() !== "undefined"){
       $(this).find('.picker-switch').html($(this).find('.picker-switch').html().split(" ")[0]);
     };    
   });

• show.datetimepicker在弹出窗口打开时触发。
• 当您使用“下一个”“上一个”箭头时，将触发update.datetimepicker
• 当你 select 一个日期时， change.datetimepicker被触发

更新

这个小提琴在接下来的 3 个闰年中禁用了 2 月 29 日您可以使用disabledDates选项简单地禁用特定日期。

$('#datetimepicker1').datetimepicker({
    disabledDates: [new Date('2024-02-29'),new Date('2028-02-29'),new Date('2032-02-29')]
});