CODEWITHSUNDEEP
javascriptsyncfusionej2-syncfusionsyncfusion-spreadsheet
Chatra
Chatra

Reputation: 3139

DatePicker in Columns Syncfusion JavaScript Spreadsheet

I want to open calendar in one of the columns and when use select date, I want to display in MM/dd/yyyy. I want to validate date too on button click.

var sheet = [

  {
    ranges: [{
      dataSource: tradeData
    }],
    fieldAsColumnHeader: true,
    columns: [{
        width: 70
      }, {
        width: 80
      }, {
        width: 100
      }, {
        width: 100
      },
      {
        width: 70
      }, {
        width: 120
      }, {
        width: 80
      }, {
        width: 120
      },
      {
        width: 140
      }, {
        width: 80
      }, {
        width: 120
      }, {
        width: 120
      }
    ],
    rows: [{
      index: 1,
      cells: [{
          index: 3,
          value: '',
          validation: {
            type: 'List',
            value1: trade_types.toString()
          }
        },
        {
          index: 8,
          value: '',
          validation: {
            type: 'List',
            value1: counter_parties.toString()
          }
        },
        {
          index: 10,
          value: '',
          validation: {
            type: 'List',
            value1: settlement_methods.toString()
          }
        }
      ]
    }]
  }
];


var spreadsheet = new ej.spreadsheet.Spreadsheet({
  showRibbon: false,
  showFormulaBar: false,
  showSheetTabs: false,
  sheets: sheet,
  created: () => {
    //Add Data validation to range.
  }

});

spreadsheet.appendTo('#spreadsheet');

Upvotes: 0

Views: 91

Answers (1)

Vasanth R
Vasanth R

Reputation: 11

We have prepared a sample in which data validation is added to the date picker column. The data validation condition is applied when choosing a value not exceeding the current date. If the selected value is greater than the current date, the cell in which the date has been chosen changes to yellow, as requested.

We have enclosed the code block and a sample link for your reference.

CODE BLOCK:

function onDateChange(args) {
  let datePickerValue = args.value;
  let actCell = spreadsheet.getActiveSheet().activeCell;
  let date = datePickerValue.toLocaleDateString();
  spreadsheet.updateCell({ value: date, format: 'MM-dd-yyyy' }, actCell);
  let cellIdx = ejs.spreadsheet.getRangeIndexes(actCell);
  let cell = ejs.spreadsheet.getCell(
    cellIdx[0],
    cellIdx[1],
    spreadsheet.getActiveSheet()
  );
  // Fetching the current date.
  var today = new Date().toLocaleDateString();
  if (cell.format === 'MM-dd-yyyy') {
    // Apply validation to the cell.
    spreadsheet.addDataValidation({ type: 'Date', operator: 'LessThanOrEqualTo', value1: today, isHighlighted: true}, actCell);
  }
}

Stackblitz Sample: https://stackblitz.com/edit/jc3drr-k4uiol?file=index.js

We have just added an example of validation to the date column. You can add your own customised data validation as per your requirements.

Upvotes: 0

Related Questions