DateTime Box

<?php
.cf_date_picker2
{
allowEmpty:true;
timePicker:true;
inputOutputFormat:'d-m-Y H:i';
}
?>

datetime::{timePicker: true, format: 'd-m-Y H:i:s'}

datetime::{timePicker: true, format: 'd-m-Y H:i:s', inputOutputFormat: 'Y-m-d H:i'}

my_field_class::{minDate: {date: '01-01-1960', format: 'd-m-Y'}, maxDate: {date: '31-12-1999', format: 'd-m-Y'}}

my_field_class::{months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato']}

my_field_class::{yearsPerPage: 10}

my_field_class::{startView: 'decades'}

my_field_class::{startView: 'year'}

my_field_class::{minDate: {date: '01-01-1960', format: 'd-m-Y'}, maxDate: {date: '31-12-1999', format: 'd-m-Y'}, months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'], startView: 'decades'}

var s_delay = 80;
var e_delay = 30;

var startDate = '';
var pad = function(str) { 
  str = String(str); 
  return (str.length < 2) ? "0" + str : str; 
} 

d = new Date();
d.setDate(d.getDate() + s_delay);
var d_month = d.getMonth();
d_month++;
startDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear();

var endDate = '';
d = new Date();
d.setDate(d.getDate() + s_delay + e_delay);
var d_month = d.getMonth();
d_month++;
endDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear();

minDate: { date: startDate, format: 'd-m-Y' }, maxDate: { date: endDate, format: 'd-m-Y' }

var s_delay = 80;

var startDate = '';
var pad = function(str) { 
  str = String(str); 
  return (str.length < 2) ? "0" + str : str; 
} 

d = new Date();
d.setDate(d.getDate() + s_delay);
var d_month = d.getMonth();
d_month++;
startDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear();

minDate: { date: startDate, format: 'd-m-Y' }

my_field_class::{minDate: {date: '01-01-1960', format: 'd-m-Y'}, maxDate: {date: '31-12-1999', format: 'd-m-Y'}, months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'], startView: 'decades'}

minDate: {date: '01-01-1960', format: 'd-m-Y'}, maxDate: {date: '31-12-1999', format: 'd-m-Y'}, months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'], startView: 'decades'

var s_delay = 80;
    var e_delay = 30;

    var startDate = '';
    var pad = function(str) {
      str = String(str);
      return (str.length < 2) ? "0" + str : str;
    }

    d = new Date();
    d.setDate(d.getDate() + s_delay);
    var d_month = d.getMonth();
    d_month++;
    startDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear();

    var endDate = '';
    d = new Date();
    d.setDate(d.getDate() + s_delay + e_delay);
    var d_month = d.getMonth();
    d_month++;
    endDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear();

container is null
[Break On This Error] container.set('html', content);
javascript/md_stylechanger.js (line 66)

And how does the box know what class to use if in the new code in datepicker settings does not specify class?

Enter the class name assigned to the datetime picker fields, e.g: dateTimePicker OR datetime::{timePicker: true}|#|datetime2::{timePicker: false}

datetime::{timePicker: true}|#|datetime2::{timePicker: false}

You can set the Time Picker on or off in the datetime box element configuration.

nascita::{minDate: {format: 's-m-Y', date: '01-01-1960', format: 'd-m-Y'}, maxDate: {date: '31-12-1999', format: 'd-m-Y'}, months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'], startView: 'decades'}|#|giorno_cerco-te::months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato']};

new DatePicker('.si_date_picker_factuurinvoer', {pickerClass: 'datepicker_vista', format: 'd-m-Y', inputOutputFormat: 'd-m-Y', allowEmpty: 0, timePicker: 0, timePickerOnly: 0, onClose: berekenvervaldatum, maxDate: { date: factuurinvoermaxdatum, format: 'd-m-Y'}});
			

var s_delay = 80;

var startDate = '';
var pad = function(str) { 
  str = String(str); 
  return (str.length < 2) ? "0" + str : str; 
} 

d = new Date();
d.setDate(d.getDate() + s_delay);
var d_month = d.getMonth();
d_month++;
startDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear();

minDate: { date: startDate, format: 'd-m-Y' }

format: 'd-m-Y', months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro' ], days: ['Domingo', 'Segunda-Feira', 'Terça-Feira', 'Quarta-Feira', 'Quinta-Feira', 'Sexta-Feira', 'Sábado']

<div class="ccms_form_element cfdiv_datetime" id="autoID-e5aede781a010bc0af22f57d36e5c6ca_container_div" style=""><label>Datum*</label><input maxlength="80" size="30" class="art-postcontent::{timePicker: false, format: 'd-m-Y H:i:s', inputOutputFormat: 'd-m-Y H:i'} validate['required'] cf_date_picker" title="" type="text" container_id="0" value="" name="input_datetime_6" />

this will affect all the default date fields in the form, custom ones will not be affected

Please post a link to the form so I can take a quick look.

startView: 'month', format: '%d/%m/%Y %H:%M', months: ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre' ], days: ['do', 'lu', 'ma', 'me', 'gi', 've', 'sa'] , minDate: new Date()

Hmm . . .It's probably always been like that and I've never dragged one aside to look underneath :-(

The fix I found is to use a plain Text input element instead of a DateTime Picker element.

Wouldn't it be easier to manage the javascript code creating a new instance of a DTP and assigning it to a variable instead of a generic assignment?

<?php
$document =& JFactory::getDocument();
// make sure that MooTools is loaded
JHTML::_( 'behavior.mootools' );
$cf_url = JURI::root().'components/com_chronoforms/js/datepicker_moo/';

// you can change the uncommented line here to change the style
$datepicker_style = $form->form_params->get( 'datepicker_moo_style', 'datepicker_dashboard' );
$document->addStyleSheet( $cf_url.$datepicker_style.'/'.$datepicker_style.'.css' );
// set the datepicker language
$lang =& JFactory::getLanguage();
$tag = $lang->getTag();
if ( !$tag ) {
    $tag = $lang->getDefault();
}
$use_tag = 'en-US';
if ( file_exists( $cf_url.'Locale.'.$tag.'.DatePicker.js' ) ) {
    $use_tag = $this->tag;
}
// load the datpicker script files
$document->addScript( $cf_url.'Locale.'.$use_tag.'.DatePicker.js' );
$document->addScript( $cf_url.'Picker.js' );
$document->addScript( $cf_url.'Picker.Attach.js' );
$document->addScript( $cf_url.'Picker.Date.js' );
?>

window.addEvent('load', function() {
  var start_date, end_date;
  // set up the start datepicker
  start_date = new Picker.Date($('start_date'), {
    pickerClass: 'datepicker_dashboard',
    format: '%Y-%m-%d',
    allowEmpty: true,
    useFadeInOut: !Browser.ie
  });
  // set up the end datepicker
  end_date = new Picker.Date($('end_date'), {
    pickerClass: 'datepicker_dashboard',
    format: '%Y-%m-%d',
    allowEmpty: true,
    useFadeInOut: !Browser.ie
  });
  // add a check when the end datepicker is opened
  end_date.addEvent('open', function() {
    if ( start_date.date != end_date.date ) {
      end_date.options.minDate = start_date.date;
    }
  });
});

end_date.options.minDate = start_date.date;

end_date.options.minDate = start_date.date.increment('day', 4);

I've got this working with a chunk of custom code (needed because of some quirks in the way ChronoForms handles the datepickers).

The form uses two standard Text box elements (not datepicker elements). They have ids 'start_date' and 'end_date'.
The Custom Code action has this code to load the required datepicker files (normally this is done by ChronoForms)

  // add a check when the end datepicker is opened
  end_date.addEvent('open', function() {
    if ( start_date.date != end_date.date ) {
      end_date.options.minDate = start_date.date;
    }
  });
});

I've got this working with a chunk of custom code (needed because of some quirks in the way ChronoForms handles the datepickers). You can see it here

  // set up the end datepicker
  end_date = new Picker.Date($('end_date'), {
    pickerClass: 'datepicker_dashboard',
    format: '%Y-%m-%d',
    allowEmpty: true,
    useFadeInOut: !Browser.ie
  });
  // add a check when the end datepicker is opened
  end_date.addEvent('open', function() {
    if ( start_date.date != end_date.date ) {
      end_date.options.minDate = start_date.date;
    }
  });
});

  end_date.addEvent('open', function() 
  {
    if ( $('start_date').value != $('end_date').value ) {
      end_date.select(Date.parse($('start_date').value));
    }
  });

    if ( start_date.date != end_date.date ) {
      end_date.select(start_date.date);
    }

    if ( start_date.date != end_date.date ) {
      end_date.select(start_date.date);
      end_date.options.minDate = start_date.date;
      end_date.options.maxDate = start_date.date;
    }

I updated the demo form to this version.

It's working OK here in FireFox, maybe the browser cache needs clearing.

There are no JS errors in the page ?

Did you try to add any "Custom date picker" actions to the form ?