The DatePicker for Date Of Birth in this example is not working.
https://ej2.syncfusion.com/javascript/documentation/spreadsheet/template/
I want to Bind the date picker with DataSource.
Instead of showing date picker all the time, I want to show Date picker when user clicks on the cell.
How can I achieve these two?
Thanks for your suggestion.
We have modified our response to meet your suggestion. Hereby, we share the code snippets of the solution provided to the concerned query.
index.html
<html><head><script src="//ej2.syncfusion.com/javascript/demos/spreadsheet/default/datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/20.3.47/dist/ej2.min.js" type="text/javascript"></script>
<link href="https://cdn.syncfusion.com/ej2/20.3.47/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
touch-action:none;
}
</style></head><body><div class="stackblitz-container bootstrap5"><div class="control-section">
<div class="control-wrapper">
<div id="spreadsheet"></div>
</div>
</div>
index.js
//Initialize Spreadsheet component
var spreadsheet = new ej.spreadsheet.Spreadsheet({
sheets: [
{
name: 'Car Sales Report',
ranges: [{ dataSource: defaultData }],
columns: [
{ width: 180 },
{ width: 130 },
{ width: 130 },
{ width: 180 },
{ width: 130 },
{ width: 120 },
],
},
],
openUrl:
'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
saveUrl:
'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save',
created: function () {
// Applies cell and number formatting to specified range of the active sheet
spreadsheet.cellFormat(
{ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
'A1:F1'
);
spreadsheet.numberFormat('$#,##0.00', 'F2:F31');
bindDatePicker();
},
beforeCellRender: function (args) {
// Condition for handling imported files alone.
if (
spreadsheet.activeSheetIndex === 0 &&
!args.element.classList.contains('e-header-cell')
) {
// Render templates dynamically for date range cells.
let target = args.element.firstElementChild;
// Convert the input element as an EJ2 datepicker component.
new ej.calendars.DatePicker({ placeholder: 'Delivery Date' }, target);
}
},
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
function bindDatePicker() {
let sheet = spreadsheet.getActiveSheet();
let range = sheet.usedRange;
let rangeCollection = [];
for (var i = 0; i <= range.rowIndex; i++) {
let cells = sheet.rows[i].cells;
for (var j = 0; j <= range.colIndex; j++) {
if (cells[j] && cells[j].value && cells[j].format == 'mm-dd-yyyy') {
let address = ejs.spreadsheet.getCellAddress(i, j);
let ranges = {
template: '<input />',
address: address, // Specify the range you want.
};
rangeCollection.push(ranges);
}
}
}
spreadsheet.sheets[0].ranges = rangeCollection;
spreadsheet.resize(); // to refresh the spreadsheet
}
Also, the referral links shared are up-to-date and will be alive. The user can access these links anytime for reference.
Query #1: I want to Bind the date picker with DataSource.
Your requirement can be achieved by using our template property. For your convenience, we have prepared the sample that renders the Date picker for date value applied cells in created and beforeCellRender event. You can find the sample link below.
Sample link: https://stackblitz.com/edit/zykkem?file=index.js
Reference Links:
Demo Link: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/spreadsheet/cell-template.html
Documentation Link: https://ej2.syncfusion.com/javascript/documentation/spreadsheet/template/
KB Link: https://www.syncfusion.com/kb/12834/how-to-dynamically-add-cell-template-in-javascript-spreadsheet
Query #2: Instead of showing date picker all the time, I want to show Date picker when user clicks on the cell.
Once the data picker is rendered in the cell, it will add this input element to the DOM, and it will display all the time. If you need to show only when you click that cell, you need to destroy and re-render the template again and again, which is a tedious process and complex to implement.
