如何在datepicker中添加自定义模板。

Question

我正在为我的项目使用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.
                };
            }
        }

    });

Answer 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;
  }