使用链接和文本实现bootstrap-datepicker

Question

我有一个文本标签和一个带有2个箭头按钮的链接，我需要在其中实现一个日历小部件。 我目前正在使用bootstrap-datepicker，这对我的其他页面也非常方便。

但它们是文本字段，所以我发现它没有问题。

但在这里我没有文字输入。 我有一个标签，需要根据选定的日历日期进行更新，点击箭头时需要增加和显示日期。不知道如何使用bootstrap-datepicker将这些事件触发到日历中。

尝试创建fiddle但不确定如何使外部库正常工作。

代码：

<div class="calendar-widget"> <a><span><i class="fa fa-caret-left fa-fw"></i></span></a>

     <h3> Today, 17 Nov </h3>
 <a class="click-pick"><span><i class="fa fa-calendar fa-fw"></i></span>
                                  <input type="hidden" id="click-picker"/>
                              </a>
 <a><span><i class="fa fa-caret-right fa-fw"></i></span></a>

</div>

脚本：

$(".click-pick").datepicker({
    autoclose: true,
    todayHighlight: true
});

$(".click-pick").click(function () {
    $(".click-pick").datepicker('show');
});

Answer 1

您正在使用的bootstrap-datepicker库可以在任何元素上触发，不一定是文本input或form-group。但是，由于没有input目标，因此无法更新日期。您必须加入此组件公开的相关method调用和event。

简而言之，您将不得不使用：

1. .datepicker().on('changeDate', <callback>);：用于挂钩其日期更改事件，
2. .datepicker("setDate", <Date>);：根据您的左右箭头设置日期。

您还需要使用datepicker事件处理程序参数从changeDate组件中获取所选日期。 changeDate事件处理函数接收一个名为e的参数，您可以从中提取所选日期。

根据此处的文档：http://bootstrap-datepicker.readthedocs.org/en/release/events.html#changedate

$('.datepicker').datepicker()
        .on(picker_event, function(e){
            # `e` here contains the extra attributes
});

我们特别感兴趣的是：

1. e.date：返回所选日期
2. e.format([idx], [format])：以特定格式返回所选日期。我们不需要idx，因为我们只有一个日期选择器。 format指定返回日期的格式。我们也可以省略它，因为如果不存在，将使用在datepicker上设置的格式。

希望能帮助您更好地理解。

以下是演示小提琴：http://jsfiddle.net/abhitalks/ecL5p0xa/1/

演示代码段 ：

var curDate = new Date();  // Global or Namespace scoped variable to hold current date

$('#calIcon').datepicker({ // Initialize the datepicker with your options
    format: "dd-M-yyyy",
    weekStart: 1,
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
}).on('changeDate', dateChanged); // Hook the changeDate event to fire "dateChanged"

function dateChanged(e) {            // The handler for changeDate event
    $("#dtLabel").text(e.format());  // get the selected date in specified format 
    curDate = e.date;                // cache the selected date in the global variable
}

$("#calIcon").datepicker("setDate", new Date()); // Seed the datepicker with today

$(".glyphicon-chevron-left").on("click", function() {  // on click of left arrow
    curDate.setDate(curDate.getDate() - 1);            // decrement current date by 1
    $("#calIcon").datepicker("setDate", curDate);      // set datepicker to new date
});
$(".glyphicon-chevron-right").on("click", function() { // on click of right arrow
    curDate.setDate(curDate.getDate() + 1);            // increment current date by 1
    $("#calIcon").datepicker("setDate", curDate);      // set datepicker to new date
});

.nav {
    background-color: #ccc;
    padding: 8px;
    -webkit-user-select: none;
    user-select: none;
}
.nav span, .nav label { margin-right: 8px; }
#calIcon, .glyphicon-chevron-left, .glyphicon-chevron-right { 
    padding: 4px;
    cursor: pointer; 
}
#calIcon:hover, .glyphicon-chevron-left:hover, .glyphicon-chevron-right:hover { 
    background-color: #eee; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<div class="row nav">
    <div class="col-xs-12">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <label id="dtLabel">Today</label>
        <span id="calIcon" class="glyphicon glyphicon-calendar"></span>
        <span class="glyphicon glyphicon-chevron-right"></span>
    </div>
</div>