在引导日期选择器中启用特定日期

Posted 2023-05-07

【中文标题】在引导日期选择器中启用特定日期

【英文标题】：Enable specific dates in bootstrap datepicker

【发布时间】：2019-10-04 21:57:22

【问题描述】：

我的网站上有一个引导日期选择器 (https://github.com/uxsolutions/bootstrap-datepicker)，并且我想启用和禁用日期选择器中的所有其他日期。我该如何编码？

我怎样才能传递这个？

var enableDays = "24-07-2019, 20-08-2019, 22-08-2019, 13-09-2019"

$(function () 
    $('#deliveryDate').datepicker(
        maxViewMode: 2,
        weekStart: 1,
        startDate: '+1d',
        autoclose: true,
        todayHighlight: true,
        format: "dd-mm-yyyy", 
        clearBtn: true,
        language: form.UILanguage(),
        autoclose: true,
    ) 
);

【问题讨论】：

你能分享一些你尝试过的代码吗？

@kemicofa，我在我的问题中添加了一些代码。

【参考方案1】：

在docs of Bootstrap Datepicker 中，您可以找到beforeShowDay 选项。

您可以定义一个函数，该函数将针对未包含在给定列表中的每一天返回 enabled: false。

这是一个完整的实现：

//we start with splitting the provided string into an array
var enableDays = "24-07-2019, 20-08-2019, 22-08-2019, 13-09-2019".split(', ')

function formatDate(d) 
  var day = String(d.getDate())
  //add leading zero if day is is single digit
  if (day.length == 1)
    day = '0' + day
  var month = String((d.getMonth()+1))
  //add leading zero if month is is single digit
  if (month.length == 1)
    month = '0' + month
  return day + "-" + month + "-" + d.getFullYear()


$(function () 
  $("#deliveryDate").datepicker( 
        maxViewMode: 2,
        weekStart: 1,
        startDate: "+1d",
        beforeShowDay: function(date)
          if (enableDays.indexOf(formatDate(date)) < 0)
            return 
              enabled: false
            
          else
            return 
              enabled: true
            
        ,
        todayHighlight: true,
        format: "dd-mm-yyyy", 
        clearBtn: true,
        autoclose: true
  )
);

由于纯 JS 中的日期格式化功能有限，我编写了一个返回 dd-mm-yyyy 格式的字符串的函数。随意使用任何日期操作库（如moment.js）。