| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
Minimum date
|
Property: min-date
HTML
<ej-date-range-picker id="daterange" min-date="new DateTime(2018,9,3)"></ej-date-range-picker>
|
Property: min
HTML
<ejs-daterangepicker id="daterange" min="new DateTime(2018,9,3)"></ejs-daterangepicker>
|
|
Maximum date
|
Property: max-date
HTML
<ej-date-range-picker id="daterange" max-date="new DateTime(2019,1,1)"></ej-date-range-picker>
|
Property: max
HTML
<ejs-daterangepicker id="daterange" max="new DateTime(2019,1,1)"></ejs-daterangepicker>
|
|
Start date
|
Property: start-date
HTML
<ej-date-range-picker id="daterange" start-date="new DateTime(2019,1,1)"></ej-date-range-picker>
|
Property: startDate
HTML
<ejsdaterangepicker id="daterange" startDate="new DateTime(2019,1,1)"></ejs-daterangepicker>
|
|
End date
|
Property: end-date
HTML
<ej-date-range-picker id="daterange" end-date="new DateTime(2019,1,1)"></ej-date-range-picker>
|
Property: endDate
HTML
<ejs-daterangepicker id="daterange" endDate="new DateTime(2019,1,1)"></ejs-daterangepicker>
|
|
Preset ranges
|
Property: ranges
HTML
@{ DateTime Today = DateTime.Now; }
<ej-date-range-picker id="DateRange">
<e-ranges>
<e-range label="Last 1 Month" range="new List<Object>() { Today.AddMonths(-1).ToString(), Today.ToString() }" />
<e-range label="Last 2 Months" range="new List<Object>() { Today.AddMonths(-2).ToString(), Today.ToString() }" />
<e-range label="Last Week" range="new List<Object>() { Today.AddDays(-7).ToString(), Today.ToString() }" />
</e-ranges>
</ej-date-range-picker>
|
Property: presets
HTML
<ejs-daterangepicker id="daterange">
<e-daterangepicker-presets>
<e-daterangepicker-preset id="week" label="This Week" start="ViewBag.weekStart" end="ViewBag.weekEnd"></e-daterangepicker-preset>
<e-daterangepicker-preset id="month" label="This Month" start="ViewBag.monthStart" end="ViewBag.monthEnd"></e-daterangepicker-preset>
</e-daterangepicker-presets>
</ejs-daterangepicker>
HomeController.cs
C#
int days = (int)DateTime.Now.DayOfWeek;
ViewBag.weekStart = DateTime.Now.AddDays(-days);
ViewBag.weekEnd = ViewBag.weekStart.AddDays(6);
ViewBag.monthStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
ViewBag.monthEnd = ViewBag.monthStart.AddMonths(1).AddDays(-1);
|
|
Add ranges
|
Method: addRanges()
HTML
<ej-date-range-picker id="daterange" create="onCreate"></ej-date-range-picker>
<script>
function onCreate() {
var dateObj = $("#daterange").data("ejDateRangePicker");
dateObj.addRanges("new Range", [new Date("11/12/2019"), new Date("11/12/2021")]);
}
</script>
|
Not Applicable
|
|
Clear ranges
|
Method: clearRanges()
HTML
<ej-date-range-picker id="daterange" create="onCreate"></ej-date-range-picker>
<script>
function onCreate() {
var dateObj = $("#daterange").data("ejDateRangePicker");
dateObj.clearRanges();
}
</script>
|
Not Applicable
|
|
Get selected range
|
Method: getSelectedRange()
HTML
<ej-date-range-picker id="daterange" start-date="new DateTime(2018,1,1)" end-date="new DateTime(2018,1,10)" create="onCreate"></ej-date-range-picker>
<script>
function onCreate() {
var dateObj = $("#daterange").data("ejDateRangePicker");
console.log(dateObj.getSelectedRange());
}
</script>
|
Method: getSelectedRange()
HTML
<ejs-daterangepicker id="daterange" startdate="new DateTime(2018,1,1)" enddate="new DateTime(2018,1,10)"></ejs-daterangepicker>
<script>
document.addEventListener('DOMContentLoaded', function () {
var daterangeObj = document.getElementById("daterange").ej2_instances[0];
console.log(daterangeObj.getSelectedRange());
}
</script>
|
|
Set date range
|
Method: setRange()
HTML
<ej-date-range-picker id="daterange" create="onCreate"></ej-date-range-picker>
<script>
function onCreate() {
var dateObj = $("#daterange").data("ejDateRangePicker");
dateObj.setRange([new Date("11/12/2011"), new Date("11/12/2019")]);
}
</script>
|
Not Applicable
|