Versions Compared

Key

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

Table of Contents

Date Picker With 3 Months View and Saturday and Sunday Disabled

Thai

เครื่องมือเลือกวันที่ที่มีมุมมอง 3 เดือนและปิดการใช้งานในวันเสาร์และวันอาทิตย์

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;}}}}


English

Date Picker With 3 Months

Thai

เลือกวันที่ด้วย 3 เดือน


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

Date Picker With 3 Months, default and minimum Date set to current date

Thai

ตัวเลือกวันที่ด้วย 3 เดือนค่าเริ่มต้นและวันที่ต่ำสุดถูกตั้งค่าเป็นวันที่ปัจจุบัน

Code Block
languagejs
{{type:'date',dateFormat:'MM/DD/YYYY',correctFormat:true,defaultDate:'#date.dd/MM/yyyy#',datePickerConfig:{firstDay:0,showWeekNumber:false,numberOfMonths:3,minDate:new Date()}}}

Selection From Table

Thai

เลือกจากตาราง

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

Thai

Custom Renderer เพื่อเปลี่ยนลักษณะข้อความเป็นตัวหนา

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

Thai

Custom Renderer เพื่อเปลี่ยนลักษณะข้อความเป็นตัวหนา

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

Change Color Depending on Integer Value

Thai

เปลี่ยนสีขึ้นอยู่กับมูลค่าจำนวนเต็ม

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

Thai

เมื่อค่าจำนวนเต็มน้อยกว่า 60 ให้ตั้งค่าสีพื้นหลังเป็นสีเขียวมิฉะนั้นจะเป็นสีแดง


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

Thai

ตัวเลือกวันที่พร้อมตัวแสดงผลลูกค้า

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 Custom Renderer to Cater to Different Display Format and Data Format

Thai

ตัวใช้เลือกวันที่พร้อมตัวแสดงผลลูกค้าเพื่อจัดรูปแบบการแสดงผลที่แตกต่างกันและรูปแบบข้อมูล

Display Format: DD-MM-YYYY

Thai

รูปแบบการแสดงผล: DD-MM-YYYY


Data Format: YYYY-MM-DD

Thai

รูปแบบข้อมูล: 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;}}}}