Open andrey-hohlov opened 8 years ago
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();
});
Bump, it would be useful to pass null
or false
to initialValue
for inline calendars, such that no date or time is pre-selected.
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:![datepicker](https://cloud.githubusercontent.com/assets/7358151/10363059/fb4a9a7e-6dd3-11e5-998f-ff7992ad44e6.PNG)
User can select nothing, or select only start date, or select only end date.
Please, help, how to: