引导日期选择器 - 突出显示第一个选定的日期

Question

我发现了一些小提琴，并进行了更新，主要是将日期选择器显示为组件，无需输入。

http://jsfiddle.net/Luhbzxdn/

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