Joget DX Preview Release Available for Download

Check out Joget DX, the next generation successor to Joget Workflow for faster, simpler digital transformation.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 9 Next »

Date Picker With 3 Months View and Saturday and Sunday Disabled

{{type:'date',dateFormat:'MM/DD/YYYY',correctFormat:true,defaultDate:'01/01/1900',datePickerConfig:{firstDay:0,showWeekNumber:true,numberOfMonths:3,disableDayFn:function(date){return date.getDay()===0 || date.getDay()===6;}}}}

Date Picker With 3 Months

{{type:'date',dateFormat:'MM/DD/YYYY',correctFormat:true,defaultDate:'01/01/1900',datePickerConfig:{firstDay:0,showWeekNumber:true,numberOfMonths:3}}}

Selection From Table

{{type: 'handsontable', handsontable: { colHeaders: ['Marque', 'Country', 'Parent company'], autoColumnSize: true, data: [{name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG'}, {name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC'}, {name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd'}, {name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation'}, {name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation'}, {name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group'}], getValue: function() {var selection = this.getSelected(); return this.getSourceDataAtRow(selection[0]).name; }}}}

Customer Renderer to Change Background Color

{{renderer:function(instance, td, row, col, prop, value, cellProperties){Handsontable.renderers.TextRenderer.apply(this, arguments);td.style.backgroundColor = 'green';}}}

Custom Renderer to Change Text Style to Bold

{{renderer:function(instance, td, row, col, prop, value, cellProperties){console.log(value);td.innerHTML='<b>'+value+'</b>';}}}

Change Color Depending on Integer Value

When integer value less than 60, set background color to green, otherwise, red.

{{renderer:function(instance, td, row, col, prop, value, cellProperties){console.log(value);if(parseInt(value)<60){td.innerHTML="<span style='color: white; background-color: green;'>"+value+"</span>";}else{td.innerHTML="<span style='color: white; background-color: red;'>"+value+"</span>";}}}}

 

Date Picker with Customer Renderer

{{type:'date',dateFormat:'MM/DD/YYYY',correctFormat:true,defaultDate:'01/01/1900',datePickerConfig:{firstDay:0,showWeekNumber:true,numberOfMonths:3,disableDayFn:function(date){return date.getDay()===0 || date.getDay()===6;}},renderer:function(instance, td, row, col, prop, value, cellProperties){Handsontable.renderers.TextRenderer.apply(this, arguments);td.style.backgroundColor = 'green';}}}

Date Picker with Customer Renderer to Cater to Different Display Format and Data Format

Display Format: DD-MM-YYYY

Data Format: YYYY-MM-DD

{{type:'date',dateFormat:'YYYY-MM-DD',renderer:function(instance, td, row, col, prop, value, cellProperties){if(value!=""){const parts = value.split('-');const day = parseInt(parts[2], 10);const month = parseInt(parts[1] - 1, 10) + 1;const year = parseInt(parts[0], 10);const formattedDate = day + "-" + month + "-" + year;td.innerHTML=formattedDate;}}}}
  • No labels