Question

我想在日期选择器中设置一些修复日期，如下所示：

2018/01/01
  01/04/2018
  01/07/2018
  2018年1月10日

我已经尝试关注

var dt = new Date();
var yr = dt.getFullYear();
var dateArr = [(new Date("04-01-" + yr)), (new Date("01-01-" + yr)), (new Date("07-01-" + yr)), (new Date("10-01-" + yr))]
$("#date").datepicker();

for (var j = 0; j < dateArr.length; j++) {
  $("#date").datepicker("setDate", dateArr[j]);
}

剩余日期已禁用。我试图找到解决方案，但没有结果。任何人对此都有想法。

提前谢谢！

编辑

应用函数后，其外观如下所示：

日期并没有被禁用

Answer 1

此代码一定会对您有所帮助。他们beforeshowDay是您要寻找的东西：

$(document).ready(function(){
initComponent();
});

function initComponent()
{
var dt = new Date();
var yr = dt.getFullYear();
dateArr = ['12-05-'+yr,'12-11-'+yr];
$('#date').datepicker({
dateFormat: 'mm-dd-yy',
    beforeShowDay: function(d) {
        var dmy = (d.getMonth()+1)
        if(d.getMonth()<9) 
            dmy="0"+dmy; 
        dmy+= "-"; 

        if(d.getDate()<10) dmy+="0"; 
            dmy+=d.getDate() + "-" + d.getFullYear(); 
        if ($.inArray(dmy, dateArr) != -1) {
            return [true, "","Available"]; 
        } else{
             return [false,"","unAvailable"]; 
        }
    },
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
    });


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="input-group input-append date" id="dateRangePicker">
    <input type="text" id="date" class="form-control" name="date" />
    <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

只需正确传递availableDates数组中的日期，并确保dateFormat与数组中的日期匹配即可。运行摘要，让我知道这是否对您有帮助

注意：当您更新问题时，在此提供完整的问题我在计算机上创建的文件中的代码。只需复制并保存将其作为html文件，然后查看是否工作正常。如果可以的话您的代码中存在一些冲突。这是代码：

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
</head>
<body>
<div class="input-group input-append date" id="dateRangePicker">
    <input type="text" id="date" class="form-control" name="date" />
    <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</body>
<script>
$(document).ready(function(){
initComponent();
});

function initComponent()
{
var dt = new Date();
var yr = dt.getFullYear();
dateArr = ['12-05-'+yr,'12-11-'+yr];
$('#date').datepicker({
dateFormat: 'mm-dd-yy',
    beforeShowDay: function(d) {
        var dmy = (d.getMonth()+1)
        if(d.getMonth()<9) 
            dmy="0"+dmy; 
        dmy+= "-"; 

        if(d.getDate()<10) dmy+="0"; 
            dmy+=d.getDate() + "-" + d.getFullYear(); 
        if ($.inArray(dmy, dateArr) != -1) {
            return [true, "","Available"]; 
        } else{
             return [false,"","unAvailable"]; 
        }
    },
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
    });


}
</script>
</html>

只需将其另存为html，然后在您的浏览器中直接将其打开，并告诉我它是否有效。我们一定会解决您的问题

Answer 2

您可以设置 beforeShowDay 参数以仅启用所需的日期。您可以使用以下代码完成任务。

$(document).ready(function(){
    var enableDays = ["1-12-2018","11-12-2018","21-12-2018"];
    function enableAllTheseDays(date) {
        var sdate = $.datepicker.formatDate( 'd-m-yy', date)
        console.log(sdate)
        if($.inArray(sdate, enableDays) != -1) {
            return [true];
        }
        return [false];
    }
    $('#datepicker').datepicker({dateFormat: 'dd-mm-yy', beforeShowDay:enableAllTheseDays});
})

但是，如果您使用的是引导日期选择器，则可以更新 datesDisabled 设置。

以下是 datesDisabled

的示例

var datesForDisable = ["2018-12-14","2018-10-1","2017-10-26"]

$('yourselector').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            weekStart: 1,
            calendarWeeks: true,
            todayHighlight: true,
            datesDisabled: datesForDisable,
})

如何在bootstrap-datepicker中设置修复日期？

2 个答案: