Question

我在同一页面上有完整的日历和日期选择器。我想在完整日历中选择日期，月份或日期之后，同样的数据也必须加载到日期选择器。

<div id="calendar"></div>
<script type='text/javascript'>
        $(function() {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            var opt={
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'agendaDay,month'
                        },
                weekends:false,
                selectable: true,
                selectHelper: true,
                defaultView: 'agendaWeek',
                select: function(start, end, allDay) {
                    //calendar.fullCalendar('unselect');

                },
            };
    $('#calendar').fullCalendar(opt);

    $("#cworkweek").on("click",function() {
            opt.weekends=false;
            $('#calendar').fullCalendar('destroy');
            $('#calendar').fullCalendar(opt);
            $(".datepicker").datepicker("destroy");
            getdate(1,5);

    });
    $("#cweek").on("click",function() {
            opt.weekends=true;
            $('#calendar').fullCalendar('destroy');
            $('#calendar').fullCalendar(opt);
            $(".datepicker").datepicker("destroy");
            getdate(0,6);
    });
});
</script>

以上代码适用于完整日历。以下是日期选择器。

<span id="startDate"></span>-<span id="endDate"></span>
    <div class="datepicker"></div>
    <script type="text/javascript">
    function getdate(sdate,edate)
    {
        var startDate;
        var endDate;
        var selectCurrentWeek = function() {
            window.setTimeout(function (){
                $('.datepicker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
            }, 2);
        }
        $('.datepicker').datepicker({
            numberOfMonths:[2,1],
            dateFormat: 'M dd,yy',
            onSelect: function(dateText, inst) { 
                var date = $(this).datepicker('getDate');
                startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()+ sdate);
                endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + edate);
                var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
                $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings));
                $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
                var d = new Date(dateText);
                $('#calendar').fullCalendar('gotoDate', d);
                selectCurrentWeek();
            },
            beforeShowDay: function(date) {
                var cssClass = '';
                if(date >= startDate && date <= endDate)
                    cssClass = 'ui-datepicker-current-day';
                return [true, cssClass];
            },

        });
    }
    $(function() {
       getdate(5,1);
    });
    </script>

如此善意地建议我。实际上我已经使用日期选择器完成了上述代码。

Answer 1

代码读起来并不是很清楚，您可以使用Jsfiddle来展示它的工作示例。通常，您可以触发自定义事件。例如，在日历中选择日期后，您可以触发：

$('#calendar').trigger({
    type:"date-updated.calendar",
    new_date: 'the-date-of-the-calendar
});

和你设置的日期选择器中的某个地方

$('#calendar').on("date-updated.calendar",function(ev){
    var new_date = ev.new_date;
    //update your datepicker with new_date
});

在datepicker中加载事件

1 个答案: