Custom tooltip.template date format based on categoryAxis baseUnit

[Deej]

If anybody else is wondering, because this code took me forever to figure out, here's how I change the tooltip template date format. Only works with dates, not times. Probably won't be perfect if your time zones are too far apart, but Daylight Saving Time won't screw it up.

$('#DateChart').kendoChart({
    ...
    categoryAxis: {
        baseUnit: "fit",
        autoBaseUnitSteps: {
            seconds: [],
            minutes: [],
            hours: [],
            days: [1],
            weeks: [1],
            months: [1,3],
            years: [1]
        },
        maxDateGroups: MaxBars,
    },
    tooltip: {
        visible: true,
        template: $('#DateChartTemplate').html()
    }
});

<script id="DateChartTemplate" type="text/x-kendo-template">
    # var BaseUnit = $('\#DateChart').data("kendoChart").options.categoryAxis.baseUnit;
    var FirstDate = array[0].Date;
    var LastDate = array[array.length - 1].Date;

    if (BaseUnit == "days" || (BaseUnit == "fit" &&
    Math.round((LastDate - FirstDate) / 86400000) < MaxBars)) { #
        #:value#<br />
        #=kendo.format("{0:ddd MMM d}", category)#

    # } else if (BaseUnit == "weeks" || (BaseUnit == "fit" &&
    (Math.round((LastDate - FirstDate) / 86400000)
    + FirstDate.getDay() - LastDate.getDay()) / 7 < MaxBars)) { #
        #:value#<br />
        #=kendo.format("{0:'Week of' MMM d}", category)#

    # } else if (BaseUnit == "months" || (BaseUnit == "fit" &&
    (LastDate.getFullYear() - FirstDate.getFullYear()) * 12
    + LastDate.getMonth() - FirstDate.getMonth() < 3 * MaxBars)) { #
        #:value#<br />
        #=kendo.format("{0:MMMM yyyy}", category)#

    # } else { #
        #:value#<br />
        #=kendo.format("{0:yyyy}", category)#
    # } #
</script>