Как установить фиксированные даты в bootstrap-datepicker? - PullRequest
Новая
       14

Как установить фиксированные даты в bootstrap-datepicker?

0 голосов
/ 01 декабря 2018

Я хочу установить некоторые фиксированные даты в DatePicker следующим образом:

01/01/2018
01/04/2018
01/07/2018
01 /10/2018

Я пытался выполнить следующие действия: 

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

Остальные даты отключены.Я пытался найти решение, но безрезультатно.Любой имеет представление об этом.

Заранее спасибо !!

РЕДАКТИРОВАТЬ

После применения вашей функции ее внешний вид выглядит следующим образом:

image

Дата не отключена, как я хочу

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018

Этот код определенно вам поможет.Они 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, откройте его прямо в браузере и дайте мне знать, если он работает.Мы обязательно исправим вашу проблему

0 голосов
/ 01 декабря 2018

Вы можете установить параметр 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});
})

Но если вы используете средство выбора даты начальной загрузки, вы можете обновить настройку dateDisabled .

ниже приведен пример dateDisabled 

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,
})
...