Question

我正在使用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
     }
});

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

P.S：此脚本还使用date format plugin来简化某些功能，例如检查当天是否已关闭。

Answer 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个范围限制。

Bootstrap datepicker下一个和前一天的按钮

1 个答案: