Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 140879 | Nov 12,2018 07:47 PM UTC | Nov 19,2018 10:00 AM UTC | ASP.NET MVC - EJ 2 | 10 |
|
Tags: DateTimePicker |
|
<ejs-datetimepicker id="datetime" step="60" open="onOpen" timeFormat="H:mm" format="dd/MM/yyyy H:mm"></ejs-datetimepicker>
<script>
function onOpen(args) {
if (!args.popup.element.classList.contains('e-datepicker')) {
//finding all the li elements in timepicker popup
var allItems = this.popupObject.element.children[0].querySelectorAll('.e-list-item');
var minTimeObj = new Date('1/1/2019 09:00 AM'); // generate timestamp of min time
var minTime = +minTimeObj.getTime();
var maxTimeObj = new Date('1/1/2019 08:00 PM');
var maxTime = +maxTimeObj.getTime(); // generate timestamp of max time
for (var i = 0; i < allItems.length; i++) {
var time = allItems[i].getAttribute('data-value');
var tempObj = new Date("1/1/2019" + " " + time);
var temp = +tempObj.getTime();
//checking each li value with min and max time values
if (!((minTime <= temp) && (temp <= maxTime))) {
//if the time values not in range then add in-built 'e-disabled' class to disable it
allItems[i].classList.add('e-disabled');
}
}
}
}
</script> |
|
<script>
function onOpen(args) {
if (!args.popup.element.classList.contains('e-datepicker')) {
//finding all the li elements in timepicker popup
var allItems = this.popupObject.element.children[0].querySelectorAll('.e-list-item');
var min = new Date().setHours(9);
var minTime = new Date(new Date(min).setMinutes(30)); // generate timestamp of min time
var maxTime = new Date().setHours(20); // generate timestamp of max time
for (var i = 0; i < allItems.length; i++) {
var time = allItems[i].getAttribute('data-value');
var todayDate = new Date().toLocaleString(this.locale).split(',')[0];
// using EJ parse Date method to parse the time string based on the loaded culture and get the resultant date object properly
var tempObj = this.globalize.parseDate(todayDate + ' ' + time, {
format: this.cldrDateTimeFormat(), type: 'datetime'
});
var temp = +tempObj.getTime();
//checking each li value with min and max time values
if (!((minTime <= temp) && (temp <= maxTime))) {
//if the time values not in range then add in-built 'e-disabled' class to disable it
allItems[i].classList.add('e-disabled');
}
}
}
}
</script>
|
|
[index.cshtml]
<div class="col-sm-10">
@Html.EJS().DateTimePickerFor(model => model.FechaInicio).Open("onOpen").Width("300px").Change("checkInRange").Created("checkInRange").Render()
</div>
[Script]
var minTime = new Date(new Date(new Date(new Date(new Date(new Date().setHours(9))).setMinutes(30)).setSeconds(0)).setMilliseconds(0));// generate timestamp of min time
var maxTime = new Date(new Date(new Date(new Date(new Date().setHours(20)).setMinutes(0)).setSeconds(0)).setMilliseconds(0));// generate timestamp of max time
var jsonData = { "minTime": minTime, "maxTime": maxTime };
function checkInRange(args) {
var instance = document.getElementById("FechaInicio").ej2_instances[0];
var args = args == undefined ? instance : args;
if (args.value != null) {
var time = this.element.value.split(" ");
var todayDate = new Date().toLocaleString(this.locale).split(',')[0];
var tempObj = this.globalize.parseDate(todayDate + ' ' + time[1] + " " + time[2] + " " + time[3] , {
format: this.cldrDateTimeFormat(), type: 'datetime'
});
// check the selected value as has time which is within in the time range from 9:30 a. m. to 8:00 p. m.
if (!(+jsonData.minTime < +tempObj && +tempObj < +jsonData.maxTime)) {
instance.value = new Date(new Date(args.value.setHours(jsonData.minTime.getHours())).setMinutes(jsonData.minTime.getMinutes()));
}
}
}
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
or the page will be automatically redirected to sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
