Verknüpfter Datumsbereich - Von-Bis-Bereich der Auswahl entsprechend einschränken

Um den selektierbaren Datumsbereich (beispielsweise Datum von & Datum bis) gemäss der Auswahl einzuschränken, kann folgendes im Form Wizard eingebaut werden:

Form Wizard

1. CSS Klasse "dateRangeFrom" bei Datum A eintragen
   
2. CSS Klasse "dateRangeTo" bei Datum B eintragen
   
3. Feld mit Fragetyp als Anzeigetext erstellen, Sichtbarkeit auf false stellen
   
   

4. Folgenden JS Code in die Beschriftung einfügen

   <script type="text/javascript" defer="defer">
   var $dateRangeFrom = $jax(".dateRangeFrom input[name$='-date']");
   var $dateRangeTo = $jax(".dateRangeTo input[name$='-date']");
   
   $jax(".dateRangeFrom input[name$='-date'], .dateRangeTo input[name$='-date']").on("dp.show", function() {
   
       $dateRangeFrom.off("dp.change").on("dp.change", function(selected) {
               $dateRangeTo.data("DateTimePicker").minDate(selected.date);
           });
   
       $dateRangeTo.off("dp.change").on("dp.change", function(selected) {
               $dateRangeFrom.data("DateTimePicker").maxDate(selected.date);
           });
   
       var setDateRangeFrom = $dateRangeFrom.val();
       var setDateRangeTo = $dateRangeTo.val();
   
       $dateRangeFrom.data("DateTimePicker").maxDate(setDateRangeTo);
       $dateRangeTo.data("DateTimePicker").minDate(setDateRangeFrom);
   });
   </script>

   

Mehrere Datumsbereiche in einer Tabelle WIP

Lösung via custom.js

• CSS Klasse in der Tabelle
  • dateRangeTable
• Name der Datenfelder:
  • datumVon
  • datumBis

(function() {
    var old = initAutoFields;
    initAutoFields = function() {
        var result = old.apply(this, arguments);
        dateRangeTable();
        return result;
    }
})();

function dateRangeTable() {

$jax("input[name $='-date']").on("dp.show", function() {
			
		$jax(".dateRangeTable .jax-list-row").each(function(){
			
			var selectorDateFrom = $jax("input[name$='_datumVon-date']", this);
			var selectorDateTo = $jax("input[name$='_datumBis-date']", this);
			
			$jax(selectorDateFrom).on("dp.change", function(selected) {
				$jax(selectorDateTo).data("DateTimePicker").minDate(selected.date);
			});
			
			$jax(selectorDateTo).on("dp.change", function(selected) {
				$jax(selectorDateFrom).data("DateTimePicker").maxDate(selected.date);
			});
				 
			var setDateRangeFrom = $jax(selectorDateFrom).val();
			var setDateRangeTo = $jax(selectorDateTo).val();
			 
			if (setDateRangeFrom.length && setDateRangeTo.length) {
				$jax(selectorDateFrom).data("DateTimePicker").maxDate(setDateRangeTo);
				$jax(selectorDateTo).data("DateTimePicker").minDate(setDateRangeFrom);
			}
		});
    });
};