引导日期选择器下一天和前一天按钮答案

【问题标题】：Bootstrap datepicker next and previous day buttons引导日期选择器下一天和前一天按钮
【发布时间】：2017-01-28 11:51:02
【问题描述】：

我正在使用bootstrap datepicker，我想制作 2 个按钮（下一个和上一个），这将使日历选择器使用 jQuery 从当前所选日期转到下一个空闲日或前一个空闲日。

它应该与会告诉我所选日期的默认事件处理程序一起使用。

我只有这个：

// Build dayoff dates
var $dayOffDates = [],
    $dayOffFormattedDates = [];
$.each(data.dayoff_dates, function (i, e) {
    $dayOffDates.push(new Date(e));
    $dayOffFormattedDates.push(new Date(e).format('yyyy-mm-dd'));
});

// Check if current date is day off
var $isDayOff = $.inArray(new Date().format('yyyy-mm-dd'), $dayOffFormattedDates);

// Initialize date picker
var $firstCalendarPicker.datepicker({
    language: 'de',
    format: 'dd/mm/yyyy',
    startDate: '0d',
    endDate: '+<?php echo ($this->_options->weeks_advance) ? $this->_options->weeks_advance : '3'; ?>w', // backend value
    maxViewMode: 0,
    todayBtn: ($isDayOff === -1) ? 'linked' : false,
    todayHighlight: false,
    toggleActive: true,
    datesDisabled: $dayOffDates
}); 
$('.next').click(function(){
    /*
     * @todo should navigate to the next free date
     */
});
$('.previous').click(function(){
     /*
      * @todo should navigate to the previous free date
      */
});
$firstCalendarPicker.on('changeDate', function (e) {
     if (typeof e != 'undefined' && typeof e.date != 'undefined') {
         //e.date
     }
});

如果没有可用的过去几天或未来几天，则应禁用下一个或上一个按钮。

附注：该脚本还使用date format plugin 来简化一些功能，例如检查当天是否关闭。

【问题讨论】：

标签： jquery bootstrap-datepicker

【解决方案1】：

// Navigate to next date
$('.next').click(function(){
    var $endDate =  new Date($timePickerTableWrap.data('branch-end-date')),
    $selectedDay = $firstCalendarPicker.datepicker('getDate');

    var $tmpSelectedDay= new Date($selectedDay);
    $tmpSelectedDay.setDate($tmpSelectedDay.getDate() + 1);

    // Limit navigation
    if($tmpSelectedDay.getTime() / 1000 < $endDate.getTime() / 1000)
    {
        $firstCalendarPicker.datepicker('update',$tmpSelectedDay);
    }
});

// Navigate to previous date
$('.previous').click(function(){
    var $startDate = new Date($timePickerTableWrap.data('branch-start-date')),
    $selectedDay = $firstCalendarPicker.datepicker('getDate');

    var $tmpSelectedDay = new Date($selectedDay);
    $tmpSelectedDay.setDate($tmpSelectedDay.getDate() -1);

    // Limit navigation
    if($tmpSelectedDay.getTime() / 1000 >= $startDate.getTime() / 1000)
    {
        $firstCalendarPicker.datepicker('update',$tmpSelectedDay);
    } 
});

工作一段时间后，这仅提供到下一个或上一个日期的导航。

请注意，$startDate 和 $endDate 有 2 个范围限制。

【讨论】：