Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
Width
|
Property: width
<EJ.DateRangePicker id="daterangepicker" width="200px" ></EJ.DateRangePicker>
|
Property: width
<DateRangePickerComponent id="daterangepicker" width="200px"></DateRangePickerComponent>
|
Readonly
|
Not Applicable
|
Property: readonly
<DateRangePickerComponent id="daterangepicker" readonly={true}></DateRangePickerComponent>
|
Show/Hide the clear button
|
Not Applicable
|
Property: showClearButton
<DateRangePickerComponent id="daterangepicker" showClearButton={true}></DateRangePickerComponent>
|
Height
|
Property: height
<EJ.DateRangePicker id="daterangepicker" height="35px" ></EJ.DateRangePicker>
|
Can be achieved by
<DateRangePickerComponent id="daterangepicker" cssClass="e-custom-style"></DateRangePickerComponent>
.e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group {
height: 35px;
}
|
Show/Hide the week number
|
Not Applicable
|
Property: weekNumber
<DateRangePickerComponent id="daterangepicker" weekNumber={true}></DateRangePickerComponent>
|
Watermark text
|
Property: watermarkText
<EJ.DateRangePicker id="daterangepicker" watermarkText="Select a Range" ></EJ.DateRangePicker>
|
Property: placeholder
<DateRangePickerComponent id="daterangepicker" placeholder="Select a Range"></DateRangePickerComponent>
|
Enable/Disable
|
Property: enabled
<EJ.DateRangePicker id="daterangepicker" enabled={false} ></EJ.DateRangePicker>
|
Property: enabled
<DateRangePickerComponent id="daterangepicker" enabled={false}></DateRangePickerComponent>
|
Disable the DateRangePicker
|
Method: disable()
<EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker>
function onCreate() {
var daterangeObj = $("#daterangepicker").data("ejDateRangePicker");
daterangeObj.disable();`
}
|
Not Applicable
|
Enable the DateRangePicker
|
Method: enable()
<EJ.DateRangePicker id="daterangepicker" create={onCreate} ></EJ.DateRangePicker>
function onCreate() {
var daterangeObj = $("#daterangepicker").data("ejDateRangePicker");
daterangeObj.enable();
}
|
Not Applicable
|
Enable/Disable the input textbox editing
|
Property: allowEdit
<EJ.DateRangePicker id="daterangepicker" allowEdit={false}></EJ.DateRangePicker>
|
Property: allowEdit
<DateRangePickerComponent id="daterangepicker" allowEdit={true}></DateRangePickerComponent>
|
Specify the placeholder text behavior
|
Not Applicable
|
Property: floatLabelType
<DateRangePickerComponent id="daterangepicker" floatLabelType="Auto"></DateRangePickerComponent>
|
zIndex
|
Not Applicable
|
Property: zIndex
<DateRangePickerComponent id="daterangepicker" zIndex="2000"></DateRangePickerComponent>
|
Separator
|
Property: separator
<EJ.DateRangePicker id="daterangepicker" separator="#" ></EJ.DateRangePicker>
|
Property: separator
<DateRangePickerComponent id="daterangepicker" separator="@"></DateRangePickerComponent>
|