Loading event in datepicker

Question

I do have a full calendar and date picker on the same page.i want that after selecting date,month or day from the full calendar the same data must be loaded to the date picker as well.

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

the above code is for full calendar. and following one is for date picker.

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

so kindly suggest me.actually i have done this with date picker as above code.

Answer 1

The code is not really clear to read, you could use Jsfiddle to show a working example of it. In general, you could trigger custom events. For instance, after picking in the calendar the date, you could trigger:

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

and somewhere in the datepicker you set

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