How to use the aurelia-slickgrid.FieldType.dateIso function in aurelia-slickgrid
To help you get started, we’ve selected a few aurelia-slickgrid examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ghiscoding / aurelia-slickgrid / client-cli / src / examples / slickgrid / example12.js View on Github 
defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'id', headerKey: 'TITLE', formatter: this.taskTranslateFormatter, sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true } },
{ id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80 },
{
id: 'duration', name: 'Duration (days)', field: 'duration', headerKey: 'DURATION', sortable: true,
formatter: Formatters.percentCompleteBar, minWidth: 100,
filterable: true,
filter: { model: Filters.slider, /* operator: '>=',*/ params: { hideSliderNumber: true } }
},
{ id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{ id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{
id: 'completedBool', name: 'Completed', field: 'completedBool', headerKey: 'COMPLETED', minWidth: 100,
sortable: true,
formatter: Formatters.checkmark,
exportCustomFormatter: Formatters.translateBoolean,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, labelKey: 'TRUE' }, { value: false, labelKey: 'FALSE' }],
model: Filters.singleSelect,
enableTranslateLabel: true
}
},
{
id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED', formatter: Formatters.translate, sortable: true,
minWidth: 100,
exportWithFormatter: true, // you can set this property in the column definition OR in the grid options, column def has priority over grid optionsdefineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'id', headerKey: 'TITLE', formatter: this.taskTranslateFormatter, sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true } },
{ id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80 },
{
id: 'duration', name: 'Duration (days)', field: 'duration', headerKey: 'DURATION', sortable: true,
formatter: Formatters.percentCompleteBar, minWidth: 100,
filterable: true,
filter: { model: Filters.slider, /* operator: '>=',*/ params: { hideSliderNumber: true } }
},
{ id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{ id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{
id: 'completedBool', name: 'Completed', field: 'completedBool', headerKey: 'COMPLETED', minWidth: 100,
sortable: true,
formatter: Formatters.checkmark,
exportCustomFormatter: Formatters.translateBoolean,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, labelKey: 'TRUE' }, { value: false, labelKey: 'FALSE' }],
model: Filters.singleSelect,
enableTranslateLabel: true
}
},
{
id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED', formatter: Formatters.translate, sortable: true,
minWidth: 100,defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'id', headerKey: 'TITLE', formatter: this.taskTranslateFormatter, sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true } },
{ id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80 },
{
id: 'duration', name: 'Duration (days)', field: 'duration', headerKey: 'DURATION', sortable: true,
formatter: Formatters.percentCompleteBar, minWidth: 100,
filterable: true,
filter: { model: Filters.slider, /* operator: '>=',*/ params: { hideSliderNumber: true } }
},
{ id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{ id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{
id: 'completedBool', name: 'Completed', field: 'completedBool', headerKey: 'COMPLETED', minWidth: 100,
sortable: true,
formatter: Formatters.checkmark,
exportCustomFormatter: Formatters.translateBoolean,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, labelKey: 'TRUE' }, { value: false, labelKey: 'FALSE' }],
model: Filters.singleSelect,
enableTranslateLabel: true
}
},
{
id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED', formatter: Formatters.translate, sortable: true,
minWidth: 100,defineGrids() {
this.columnDefinitions1 = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
];
this.columnDefinitions2 = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
];
this.gridOptions1 = {
enableAutoResize: false,
enableCellNavigation: true,
enableCheckboxSelector: true,
checkboxSelector: {
// remove the unnecessary "Select All" checkbox in header when in single selection mode
hideSelectAllCheckbox: true
},
rowSelectionOptions: {
// True (Single Selection), False (Multiple Selections)
selectActiveRow: true
},
enableRowSelection: truedefineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'id', headerKey: 'TITLE', formatter: this.taskTranslateFormatter, sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true } },
{ id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80 },
{
id: 'duration', name: 'Duration (days)', field: 'duration', headerKey: 'DURATION', sortable: true,
formatter: Formatters.percentCompleteBar, minWidth: 100,
filterable: true,
filter: { model: Filters.slider, /* operator: '>=',*/ params: { hideSliderNumber: true } }
},
{ id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{ id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{
id: 'completedBool', name: 'Completed', field: 'completedBool', headerKey: 'COMPLETED', minWidth: 100,
sortable: true,
formatter: Formatters.checkmark,
exportCustomFormatter: Formatters.translateBoolean,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, labelKey: 'TRUE' }, { value: false, labelKey: 'FALSE' }],
model: Filters.singleSelect,
enableTranslateLabel: true
}
},
{
id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED', formatter: Formatters.translate, sortable: true,
minWidth: 100,
exportWithFormatter: true, // you can set this property in the column definition OR in the grid options, column def has priority over grid optionsdefineGrids() {
this.columnDefinitions1 = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
];
this.columnDefinitions2 = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
];
this.gridOptions1 = {
enableAutoResize: false,
enableCellNavigation: true,
enableCheckboxSelector: true,
checkboxSelector: {defineGrids() {
this.columnDefinitions1 = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
];
this.columnDefinitions2 = [
{
id: 'title', name: 'Title', field: 'title',
sortable: true,
type: FieldType.string,
filterable: true
},
{
id: 'duration', name: 'Duration (days)', field: 'duration',
sortable: true,
type: FieldType.number,
filterable: true
},aurelia-slickgrid
Slickgrid components made available in Aurelia
Package Health Score
75 / 100Popular aurelia-slickgrid functions
- aurelia-slickgrid.Aggregators.Avg
- aurelia-slickgrid.Aggregators.Sum
- aurelia-slickgrid.Editors.checkbox
- aurelia-slickgrid.Editors.date
- aurelia-slickgrid.Editors.longText
- aurelia-slickgrid.FieldType.boolean
- aurelia-slickgrid.FieldType.date
- aurelia-slickgrid.FieldType.dateIso
- aurelia-slickgrid.FieldType.number
- aurelia-slickgrid.FieldType.string
- aurelia-slickgrid.Filters.compoundDate
- aurelia-slickgrid.Filters.compoundInput
- aurelia-slickgrid.Filters.multipleSelect
- aurelia-slickgrid.Filters.singleSelect
- aurelia-slickgrid.Filters.slider
- aurelia-slickgrid.Formatters.checkmark
- aurelia-slickgrid.Formatters.dateIso
- aurelia-slickgrid.Formatters.multiple
- aurelia-slickgrid.Formatters.percentCompleteBar
- aurelia-slickgrid.OperatorType.notEqual