Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Image Added

Date Picker With 3 Months View and Saturday and Sunday Disabled

...

Date Picker with Customer Renderer

Image Modified

Code Block
languagejs
{{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

Code Block
languagejs
{{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;}}}}