Question

我找到了一些小提琴，并进行了更新，主要是为了将datepicker显示为组件而没有输入。

javascript代码：

// Date Pickers
var month = ("January February March April May June July August September October November December").split(" ");
var now = new Date();
var nowformatted = now.getDate() + " " + month[now.getMonth()] + " " + now.getFullYear();
var dpOptions = {
    format: 'dd MM yyyy',
    startDate: now,
    setDate: now,
};

var i = 0;

    var datePicker1 = $("#date1").
        val(nowformatted).
        datepicker(dpOptions).
        on('changeDate', function (e) {
            console.log("dp1", i++);
            datePicker2.datepicker('setStartDate', e.date);         
        });

var datePicker2 = $("#date2").
        val(nowformatted).
        datepicker(dpOptions).
        on('changeDate', function (e) {
            datePicker1.datepicker('setEndDate', e.date);
        });

我遇到麻烦，当我选择第一个约会时，我看到蓝色高光，所以我可以知道选择了哪一天，但是如果我点击第二个日期选择器，第一个选择的日期就不再有突出显示了。有没有办法保留那些突出显示的元素，以便用户可以随时查看，他选择了什么？

Answer 1

在代码HTML中添加：

<input type="text" id="first-date" />
<input type="text" id="last-date" />

在javascript中使用此代码：

function myDateFormatter (dateObject) {
    var d = new Date(dateObject);
    var day = d.getDate();
    var month = d.getMonth() + 1;
    var year = d.getFullYear();
    if (day < 10) {
        day = "0" + day;
    }
    if (month < 10) {
        month = "0" + month;
    }
    var date = day + "/" + month + "/" + year;

    return date;
};


// Date Pickers
var month = ("January February March April May June July August September October November December").split(" ");
var now = new Date();
var nowformatted = now.getDate() + " " + month[now.getMonth()] + " " + now.getFullYear();
var dpOptions = {
    format: 'dd MM yyyy',
    startDate: now,
    setDate: now,
};

var i = 0;

    var datePicker1 = $("#date1").
        val(nowformatted).
        datepicker(dpOptions).
        on('changeDate', function (e) {

  $('#first-date').val(myDateFormatter(e.date));
            console.log("dp1", i++);
            datePicker2.datepicker('setStartDate', e.date);         
        });

var datePicker2 = $("#date2").
        val(nowformatted).
        datepicker(dpOptions).
        on('changeDate', function (e) {
  $('#last-date').val(myDateFormatter(e.date));
           // datePicker1.datepicker('setEndDate', e.date);
        });

bootstrap datepicker - 突出显示第一个选定日期

1 个答案: