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')]
});