The Date formatting can be achieved in ticks
and tooltip
using renderingTicks
and
tooltipChange
events respectively.
The process of formatting is explained in the below sample.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css']
})
export class AppComponent {
public tooltipData: Object = { placement: 'Before', isVisible: true };
public ticksData: Object = { placement: 'After', largeStep: 2 * 86400000 };
public min: number = new Date("2013-06-13").getTime();
public max: number = new Date("2013-06-21").getTime();
public step: number = 86400000;
public value: number = new Date("2013-06-15").getTime();
tooltipChangeHandler(args: SliderTooltipEventArgs): void {
let totalMiliSeconds = Number(args.text);
// Converting the current milliseconds to the respective date in desired format
let custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
}
renderingTicksHandler(args: SliderTickEventArgs): void {
let totalMiliSeconds = Number(args.value);
// Converting the current milliseconds to the respective date in desired format
let custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div id='container'>
<div class='wrap'>
<ejs-slider id='slider' [min]="min" [max]="max" [value]="value" step=86400000 [tooltip]="tooltipData" [ticks]="ticksData" [showButtons]=true
(tooltipChange)='tooltipChangeHandler($event)' (renderingTicks)='renderingTicksHandler($event)'></ejs-slider>
</div>
</div>
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}