Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Popup Calendar Group (gallery-popup-calendar-group) on cdn

Last Updated: 08/1/12

+ 0 -

Jeff Pihach

YUI Contributor

See 3 more by this user.

Created: 05/3/12
Last CDN Push: 05/9/12
Build Tag: gallery-2012.05.09-20-27
Project: YUI 3
License: YUI BSD
YUI Version: 3.6.0pr4
Free for use.

The Popup Calendar Group allows you to create two linked popup calendars for easy range selection. Allowing you to set an overall minimum and maximum as well as having the selections from the calendars in the group limit the bounds on one another.

if you would like to add toggle button support: http://fromanegg.com/post/28437269330/add-toggle-button-support-to-y-popupcalendar

Tags:
hatch

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

Code Sample

<script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.05.09-20-27'
}).use('gallery-popup-calendar-group', function(Y) {
 
  var startInput = Y.one('#basic-date-range #startdate'),
      endInput = Y.one('#basic-date-range #enddate'),
      pageCalendars = new Y.PopupCalendarGroup({
        // General configuration for all calendar instances
        config: {
          width: '400px',
          showPrevMonth: true,
          showNextMonth: true,
        },
 
        /*
         * Start and end date for the range, can also be specified
         * in the markup using data-range-min-date and data-range-max-date
         * on the first input of the set
         */
        //startDate: minimumDate,
        //endDate: maximumDate,
        calendars: [
            {
                start: {
                    input: startInput,
                    dateSelected: _dateSelectedFn,
                    align: {
                        node: startInput,
                        points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BC]
                    }
                },
                end: {
                    input: endInput,
                    dateSelected: _dateSelectedFn,
                    align: {
                        node: endInput,
                        points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BC]
                    }
                }
            }
        ]
    });
 
    function _dateSelectedFn(e) {
        Y.log('_dateSelectedFn', 'info', this.name);
        var date = e.newSelection[0];
        this.get('input').set('value', date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() );
    }
 
 
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.05.09-20-27'
}).use('gallery-popup-calendar-group', function(Y) {

var startInput = Y.one('#basic-date-range #startdate'),
      endInput = Y.one('#basic-date-range #enddate'),
      pageCalendars = new Y.PopupCalendarGroup({
        // General configuration for all calendar instances
        config: {
          width: '400px',
          showPrevMonth: true,
          showNextMonth: true,
        },

/*
         * Start and end date for the range, can also be specified
         * in the markup using data-range-min-date and data-range-max-date
         * on the first input of the set
         */
        //startDate: minimumDate,
        //endDate: maximumDate,
        calendars: [
            {
                start: {
                    input: startInput,
                    dateSelected: _dateSelectedFn,
                    align: {
                        node: startInput,
                        points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BC]
                    }
                },
                end: {
                    input: endInput,
                    dateSelected: _dateSelectedFn,
                    align: {
                        node: endInput,
                        points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BC]
                    }
                }
            }
        ]
    });

function _dateSelectedFn(e) {
        Y.log('_dateSelectedFn', 'info', this.name);
        var date = e.newSelection[0];
        this.get('input').set('value', date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() );
    }

});