How to set empty value for inline calendar?

[andrey-hohlov]

Thank you for great datepicker!

In my use case i have a trouble (this not help: https://github.com/bevacqua/rome/issues/22 ).

There is 2 datepickes, first - start date, second - end date:

User can select nothing, or select only start date, or select only end date.

Please, help, how to:

1. Init datepickers with empty value?
2. Set empty value when click on already selected day?

[andrey-hohlov]

My solution (with jQuery because it already using in project)

$(function(){

    var container = {
            from: document.getElementById('events-from'),
            to: document.getElementById('events-to')
        },
        instances = {
            from: false,
            to: false
        },
        inputs = {
            // Hidden inputs
            $from: $('#events-from-value'),
            $to: $('#events-to-value')
        },
        initValues = {
            // Values in inputs when page load
            from: inputs.$from.val(),
            to: inputs.$to.val()
        },

        /**
         * Settings for init
         * from - truе for firs calendar
         */

        getSettings = function(from){
            var settings,
                instance = (from ? 'from' : 'to'),
                dateValidator;

            settings = {
                time: false,
                required: false,
                inputFormat: 'DD.MM.YYYY',
                initialValue: initValues[instance],
                styles: {
                    container: 'rd-container rd-container--' + instance + (!initValues[instance] ? ' rd-container--disabled' : '') // If no selected value - hide date hightlight 
                }
            };
            if(from && initValues.to)
                dateValidator = rome.val.beforeEq(container.to);

            else if(!from && initValues.from)
                dateValidator = rome.val.afterEq(container.from);

            if(dateValidator)
                settings.dateValidator = dateValidator;

            return settings;

        },

        /**
         * Change date
         * from - truе for first calendar
         */

        changeValue= function(value, from){

            var instance = (from ? 'from' : 'to'), // Calendar where fire event
                neighbor = (from ? 'to' : 'from'), // Neighbor calendar they need to re-init
                selectedDay = inputs['$'+instance].val(); // Last selected value

            // When click to selected date
            if(selectedDay == value) {
                // Reinit neighbor
                reinitCalendar(instances[neighbor], from, false);
                // Hide selected hightlight
                $(instances[instance].container).addClass('rd-container--disabled');
                // Clear input
                inputs['$'+instance].val('');
            }
            else {
                // Reinit neighbor
                reinitCalendar(instances[neighbor], from, true);
                // Set selected day hightlight
                $(instances[instance].container).removeClass('rd-container--disabled');
                // Set input value
                inputs['$'+instance].val(value);
            }
        },

        noValidate = function () {
            return true;
        },

        reinitCalendar = function(calendar, from, validator){
            var options = calendar.options();
            if(from) {
                options.initialValue = inputs.$to.val();
                options.dateValidator = (validator ? rome.val.afterEq(container.from) : noValidate);
            }
            else {
                options.initialValue = inputs.$from.val();
                options.dateValidator = (validator ? rome.val.beforeEq(container.to) : noValidate);
            }

            // Reinit with new options
            calendar.destroy();
            calendar.restore(options);
            calendar.on('data', function (value) {
                changeValue(value, !from)
            });
        };

    instances.from = rome(container.from, getSettings(true)).on('data', function (value) {
        changeValue(value, true)
    });

    instances.to = rome(container.to, getSettings()).on('data', function (value) {
        changeValue(value)
    });

    // Refresh after init for apply dateValidator vaues
    instances.from.refresh();
    instances.to.refresh();

});

[arman-h]

Bump, it would be useful to pass null or false to initialValue for inline calendars, such that no date or time is pre-selected.