Hello , i have an issue with converting the milliseconds to human readable date,
I cannot find the solution for vue, but I have found multiple solutions for jquery.
What am i doing wrong ?
Chart.m-4.p-5( @seriesclick="onSeriesClick" :style="{ height: getChartHeight() }" )
ChartTooltip(:render="'tooltipRender'" background="#fff" color="#000")
template(v-slot:tooltipRender="{ props }")
.d-flex.align-items-center.flex-column.tooltip-content
h6.font-weight-bold.text-center.tooltip-category-title {{ props.point.category }}
.d-flex.align-items-center
span {{ $t('home.rangeBarChart.date.start') }} :
span.font-weight-bold.ml-1 {{ labelContentFrom(props.point)}}
.d-flex.align-items-center
span {{ $t('home.rangeBarChart.date.end') }} :
span.font-weight-bold.ml-1 {{ labelContentTo(props.point)}}
ChartTitle( v-if="chartTitle && chartTitle !== ''" :text="$t('home.rangeBarChart.'+ chartTitle + '.title' )" align='left' color='#475467' :font="'600 16px Inter'")
ChartSeries
ChartSeriesItem(:type="'rangeBar'", :data-items="myDataItemsComputed" :category-field="'phase'" :font="'600 14px Inter '" :color="barItemColor" :baseUnit="'months'" )
ChartSeriesLabels
ChartSeriesLabelsFrom(:content="labelContentFrom")
ChartSeriesLabelsTo(:content="labelContentTo")
ChartValueAxis
ChartValueAxisItem(
:major-grid-lines='{visible: false }'
:valueAxis="valueAxisComputed"
:fromField="'min'"
:toField="'max'"
:font="'600 14px Inter '"
)
I noticed in the jquery example, the have this : labels: {
template: "#= kendo.toString(new Date(value), 'HH:mm') #"
}
i have tried adding this code :
labels: {
template: `<div>{{ new Date(#= value #).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' }) }}</div>`
}
it does not work, any suggestions would be greatly appreciated. Thank you
I have resolved my question