Hello everyone ,
I wanted to use a calendar like this in my column if i m using datepicker:
How can i achieve this?
<html> <head> </head>
<body> <table id="grid"></table> </body>
</html>
@section scripts{ <script> $(document).ready(function () { var testData = [ { "ID": 1, "Name": "Name 1", "ExpireDate": new Date() }, { "ID": 2, "Name": "Name 2", "ExpireDate": new Date() }, { "ID": 3, "Name": "Name 3", "ExpireDate": new Date() }, { "ID": 4, "Name": "Name 4", "ExpireDate": new Date() }, { "ID": 5, "Name": "Name 5", "ExpireDate": new Date() }, { "ID": 6, "Name": "Name 6", "ExpireDate": new Date() } ]; $("#grid").igGrid({ height: "100%", width: "100%", dataSource: testData, columns: [ { headerText: "ID", key: "ID", dataType: "number", width: "50%" }, { headerText: "Name", key: "Name", dataType: "string", width: "25%" }, { headerText: "Expire Date", key: "ExpireDate", dataType: "date", width: "25%", format: "MMMM-yyyy" } ], autoGenerateColumns: true, primaryKey: "ID", features: [ { name: "Updating", editMode: "row", enableAddRow: true, rowAdded: function (evt, ui) { console.log("hi"); console.log(ui); }, columnSettings: [ { columnKey: 'ExpireDate', required: false, editorType: 'datepicker' } ], //TO BLOCK EDITING OF COMPLETE ROW // editRowStarting: function (evt, ui) { // console.log(ui.column); // Do not let users edit even-numbered rows. (only expiry date will be blocked cos u have passed it in if. if you want to block users from editing the complete row, remove ui.columnKey)
// if (ui.rowID % 2 == 0) // return false;
// }, editCellStarting: function (evt, ui) { console.log(ui); // Do not let users edit even-numbered rows. (only expiry date will be blocked cos u have passed it in if. if you want to block users from editing the complete row, remove ui.columnKey)
if (ui.columnKey == "ExpireDate" && ui.rowID % 2 == 0) return false;
} }, { name: "Filtering", type: "local", columnSettings: [ { columnKey: "RegistererDate", editorType: "datepicker", editorOptions: { dateInputFormat: "MM/yyyy", dateDisplayFormat: "MMMM yyyy", }, }, ], } ] }); }); </script>
}
Hello,
After doing some research I found that at this point IgniteUI does not provide a MonthPicker component.
What I could suggest is hiding the days of the igDatePicker and selecting only month and year.
Please have a look at this forum thread where I have already provided more information regarding this suggestion and let me know if you have any additional questions.
Regards, Monika Kirkova, Infragistics