如何在日期选择器中添加自定义模板。？

Posted 2023-05-08

【中文标题】如何在日期选择器中添加自定义模板。？

【英文标题】：How to add custom template in a datepicker.?

【发布时间】：2018-05-22 14:55:17

【问题描述】：

我在我的项目中使用 bootstrap datepicker http://bootstrap-datepicker.readthedocs.io/en/latest/，我想知道如何为特定日期添加自定义图标。我的要求是为特定日期的事件添加图标。

图像显示了我需要的输出（第 15 天的图标）。期待解决方案。提前致谢。 :)

我使用的代码。

 $('.datepicker').datepicker(
        keyboardNavigation: false,
        forceParse: false,
        templates:
            leftArrow: '<i class="material-icons icon-30">keyboard_arrow_left</i>',
            rightArrow: '<i class="material-icons icon-30">keyboard_arrow_right</i>',
        ,
        beforeShowDay: function(date)
            var d = date;
            var curr_date = d.getDate();
            var curr_month = d.getMonth() + 1; //Months are zero based
            var curr_year = d.getFullYear();
            var formate_date = curr_date + "/" + curr_month + "/" + curr_year
            if ($.inArray(formate_date, specific_date) != -1)
                return 
                    classes: 'addIcon' // Here i want to add an icon for a partiicular date.
                ;
            
        

    );

【参考方案1】：

您可以使用 beforeShowDay 事件在特定日期添加课程

var specific_date = ["15/12/2017","16/12/2017"];
beforeShowDay: function(date)
    var d = date;
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //Months are zero based
    var curr_year = d.getFullYear();
    var formate_date = curr_date + "/" + curr_month + "/" + curr_year
    if ($.inArray(formate_date, specific_date) != -1)
        return 
            classes: 'addIcon'
        ;
    
    return;

然后你可以使用 css 添加任何东西

.addIcon::after
    content: "\25CF";
    font-size:10px;
    color: blue;
    position: absolute;
    bottom: -6px;
    left: 12px;
  
  .day
    position: relative;
  

【讨论】：

谢谢，@bipin。但我需要的是在特定日期添加一个图标。 :)。我已经使用模板选项来更改左右箭头。同样，是否有任何选项可以将模板添加到特定日期。？ if ($.inArray(formate_date, specific_date) != -1) return template: ' keyboard_arrow_left' ;

你可以使用 CSS 来设计图标

请找到我需要的图片。 :)

现在不能添加 html 你可以使用 CSS 设计你的图标 我已经更新了我的 CSS 给你提示

谢谢比平。 :) 我以某种方式使用 jquery $('.datepicker').on('click', function () $(".table-condensed:first td.addIcon").append('镜头') );但是在单击下一个和上一个图标时，它不会显示该图标。但我现在有一个修复。我会将所有图标转换为字体，然后我可以使用该特定图标。再次非常感谢你。 :)