3

同じページに完全なカレンダーと日付ピッカーがあります。完全なカレンダーから日付、月、または日を選択した後、同じデータを日付ピッカーにもロードする必要があります。

<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>

親切に提案してください。実際には、上記のコードのように日付ピッカーでこれを行いました。

4

1 に答える 1

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
});
于 2012-11-20T09:55:48.473 に答える