How to disable the past dates in the Kendo date picker ? ( Date Picker validation)
That will allow the user to select only the current date and future date.
In the HTML :
#Html.EditorFor(Model => Model.AppointmentDate)
In the JQuery :
$('#AppointmentDatee').data('kendoDatePicker')
The shortest way to disable past dates is using min parameter with current date value:
var presentDate = new Date();
$(function () {
var datepicker = $('#AppointmentDate').kendoDatePicker({
value: presentDate,
min: presentDate,
}).data('kendoDatePicker');
});
If you're using Razor with #Html.Kendo() helper, use DatePickerBuilderBase.Min() method:
#(Html.Kendo().DatePicker().Name("AppointmentDate").Min(DateTime.Today))
However, the min parameter will remove all disabled past dates (i.e. they're not shown in calendar view). If you want to show disabled dates but the user cannot interact with them (by clicking the date), use k-state-disabled CSS class in empty option inside month parameter:
var datepicker = $('#AppointmentDate2').kendoDatePicker({
value: presentDate,
min: presentDate,
month: {
empty: '<div class="k-state-disabled">#= data.value #</div>'
}
}).data('kendoDatePicker');
If #(Html.Kendo()) helper is used, use DisabledDates to call a function which disables past dates like example below:
<script>
var getPastDates = function(begin, end) {
for (var dtarr = [], date = start; date < end; date.setDate(date.getDate() + 1)) {
dtarr.push(new Date(dt));
}
return dtarr;
}
function disablePastDates(date) {
var pastDate = getPastDates(new Date('0001-01-01T00:00:00Z'), new Date());
if (date && compareDates(date, dates)) {
return true;
}
else {
return false;
}
}
function compareDates(date, dates) {
for (var i = 0; i < dates.length; i++) {
if (dates[i].getDate() == date.getDate() &&
dates[i].getMonth() == date.getMonth() &&
dates[i].getYear() == date.getYear()) {
return true;
}
}
}
</script>
Helper usage:
#(Html.Kendo().DatePicker().Name("AppointmentDate").DisableDates("disablePastDates"))
Working examples:
JSFiddle demo 1 (hidden past dates)
JSFiddle demo 2 (grayed-out past dates)
References:
Kendo.Mvc.UI.Fluent.DatePickerBuilderBase.Min(DateTime)
Show Out-of-Range Dates as Disabled
Kendo MVC DatePicker - Disable dates
Similar issue (with different approach):
How to disable past dates without hiding them in Kendo date picker?
if you use jquery for your kendoDatePicker , this code may help you!
$("#MyDatapickerElement").kendoDatePicker({
value: new Date(),
disableDates: function (date) {
if (date <= new Date()) {
return true;
} else {
return false;
}
}
});
If using Html.Kendo().DatePicker() you can show the disabled dates using the MonthTemplate. Example below shows the Minimum Date set to DateTime.Today and sets the MonthTemplate to show past dates as disabled.
Html.Kendo().DatePicker()
.Name("MyDate")
.Min(DateTime.Today)
.MonthTemplate(m=>m
.Empty("<div class=\"k-state-disabled\">#= data.value #</div>")
)
I am trying to select a custom date in the datepicker present in the jqueryui.com site, it is able to process the year , but the code that i written for the month is not working.Please find the code that i have used:-
private static void PickDate(WebDriver driver, String day, String mon, String year) throws Exception {
while (year != driver.findElement(By.cssSelector("span.ui-datepicker-year")).getText())
{
if (Integer.parseInt(year) < Integer.parseInt(driver.findElement(By.cssSelector("span.ui-datepicker-year")).getText()))
{
driver.findElement(By.cssSelector("a.ui-datepicker-prev")).click();
System.out.println(driver.findElement(By.cssSelector("span.ui-datepicker-month")).getText());
}
else if (Integer.parseInt(year) > Integer.parseInt(driver.findElement(By.cssSelector("span.ui-datepicker-year")).getText()))
{
driver.findElement(By.cssSelector("a.ui-datepicker-next")).click();
}
}
while (mon != (driver.findElement(By.cssSelector("span.ui-datepicker-month")).getText()))
{
if (driver.findElement(By.cssSelector("span.ui-datepicker-month")).getText() != "January")
{
driver.findElement(By.cssSelector("a.ui-datepicker-prev")).click();
}
if (mon != driver.findElement(By.cssSelector("span.ui-datepicker-month")).getText())
{
driver.findElement(By.cssSelector("a.ui-datepicker-next")).click();
}
}
If the purpose is to select a date in the datepicker, I would rather use execute script than click back and forth. :)
Something like:
((JavascriptExecutor) driver).ExecuteScript("$('#datepicker').datepicker('setDate', new Date(year, month, day))")
If you want to click on the previous/next button, then:
Because your code looks quite complicated, so I would like to provide another approach, which I believe that will be much simpler.
Notice that when you click on the previous/next button, it will move forward/backward by 1 month. So it's better if you firstly calculate how many months in difference between the date you want to select (month and year) and the current shown date on the DatePicker.
If you write in java, you can use something like:
YearMonth selectDate = YearMonth.of(year, month); // year, month are integer
int dp_Year = Integer.parseInt(driver.findElement(By.cssSelector("span.ui-datepicker-year")).getText());
int dp_Month = // convert it yourself
YearMonth dp_Date = YearMonth.of(dp_Year, dp_Month);
int month_diff = dp_Date.until(selectDate, ChronoUnit.MONTHS);
Based on month_diff and its sign (+ or -), you will know which button you need to click on and how many times.
I don't have java to try out, but I hope that the code above will work.
I would like to ask if is possible set "FROM" and "TO" in the highchars/Stock.
I am using YEAR, so I would like to load the year but in the Input FROM and TO set a value dynamically with number after a calculation.
Is this possible?
Thank you.
1.Update:
With:
var minDate = $('input.highcharts-range-selector:eq(0)').val();
var maxDate = $('input.highcharts-range-selector:eq(1)').val();
I can get the date, but to set should be different.
var dateCurrent = new Date();
events:{
load:function(){
this.xAxis[0].setExtremes(
Date.UTC(2000, 0, 1), dateCurrent
);
}
}
Just use setExtremes().
I've been fighting this problem for most of the day now, so I figure I'd ask here...
I'm creating a plot using highcharts, and I want to use a datetime xAxis. The label I wish to show on this axis is a calculated value, relative to a set of specific dates. So I use a labels.formatter function which have access to the previous and the last dates, and relative to these dates I do some logics.
The logic is that if this.value (from within the formatter) is before the last one, the axis should show months since previous ones, if this.value == last it should show 0 and if this.value > last it should show months since last.
I have some helper functions that are called in my code, they have been used in many occasions and work as they should.
Below is the implementation of my label formatter for the xAxis.
gVars.reportAddedResistance.MonthSinceUsed = new Array();
this.highchart.options.xAxis.labels.formatter = function() {
var mbDec;
var mod;
var result;
var returnValue = null;
var isSet;
var previous = new Date(self.data.plotConf.previousDrydockDate);
var last = new Date(self.data.plotConf.lastDrydockDate);
var val = new Date(this.value);
if(val.getTime() < last.getTime()) {
// BEFORE LAST DRYDOCK
mbDec = Utils.monthsBetweenDecimal(previous, val);
mod = mbDec % 1;
if(mod <= (1 / 30.4375)) {
result = Math.round(mbDec);
isSet = gVars.reportAddedResistance.MonthSinceUsed.indexOf(result);
if(isSet == -1) {
gVars.reportAddedResistance.MonthSinceUsed.push(result);
//console.log('',"LESS Returning "+result+" Used: "+gVars.reportAddedResistance.MonthSinceUsed);
returnValue = result;
}
}
}
else if(val.getTime() == last.getTime()){
// AT LAST DRYDOCK
var result = 0;
isSet = gVars.reportAddedResistance.MonthSinceUsed.indexOf(result);
if(isSet == -1) {
gVars.reportAddedResistance.MonthSinceUsed.push(result);
//console.log('',"EVEN Returning "+result+" Used: "+gVars.reportAddedResistance.MonthSinceUsed);
returnValue = result;
}
}
else if(val.getTime() > last.getTime()){
// AFTER LAST DRYDOCK
mbDec = Utils.monthsBetweenDecimal(last, val);
mod = mbDec % 1;
if(mod <= (1 / 30.4375)) {
result = Math.round(mbDec);
isSet = gVars.reportAddedResistance.MonthSinceUsed.indexOf(result);
if(isSet == -1) {
gVars.reportAddedResistance.MonthSinceUsed.push(result);
//console.log('',"MORE Returning "+result+" Used: "+gVars.reportAddedResistance.MonthSinceUsed);
returnValue = result;
}
}
}
return returnValue;
};
The value of previous is (from console.log):
Date {Tue Jun 15 2010 02:00:00 GMT+0200 (Romance Daylight Time)}
The value of last is (from console.log):
Date {Sat Jun 15 2013 02:00:00 GMT+0200 (Romance Daylight Time)}
If I enable the console.log output I get this output, which to me indicates that the logics and date comparisons is working as expected:
LESS Returning 31 Used: 31
LESS Returning 32 Used: 31,32
LESS Returning 33 Used: 31,32,33
LESS Returning 34 Used: 31,32,33,34
LESS Returning 35 Used: 31,32,33,34,35
EVEN Returning 0 Used: 31,32,33,34,35,0
MORE Returning 1 Used: 31,32,33,34,35,0,1
MORE Returning 2 Used: 31,32,33,34,35,0,1,2
MORE Returning 3 Used: 31,32,33,34,35,0,1,2,3
MORE Returning 4 Used: 31,32,33,34,35,0,1,2,3,4
MORE Returning 5 Used: 31,32,33,34,35,0,1,2,3,4,5
MORE Returning 6 Used: 31,32,33,34,35,0,1,2,3,4,5,6
MORE Returning 7 Used: 31,32,33,34,35,0,1,2,3,4,5,6,7
MORE Returning 8 Used: 31,32,33,34,35,0,1,2,3,4,5,6,7,8
My problem is, that the returned values are not displayed on my plot. If I change the formatter function to just return this.value it displays them all, without any problems, but for some reason I cannot identify the return values (as seen in the above console.log output) is not shown.
My xAxis is configured like this:
xAxis: {
type : 'datetime',
dateTimeLabelFormats: {
day: '%Y-%m-%d',
week: '%Y-%m-%d',
month: '%Y-%m-%d',
year: '%Y-%m'
},
startOnTick : false,
tickInterval : 24 * 3600 * 1000 * 1, // 1 day
title : {
text : 'Months relative to drydockings',
style : {
fontSize : '9pt',
fontFamily : 'Arial'
}
},
labels : {
maxStaggerLines : 1,
style : {
fontSize : '7pt',
fontFamily : 'Arial'
}
}
},
I'm stuck - PLEASE HELP!!! :-)
EDIT: I'm using Highcharts JS v3.0.7 (2013-10-24)
The solution to my problem was to add this to the formatter:
if(this.isFirst) {
gVars.noOfSeriesCalled++;
}
if(gVars.noOfSeriesCalled == this.axis.series.length) {
// The stuff thats posted above
}
else {
return null;
}
I think its an error in the library that I have to use a global variable to keep track of how many iterations I've been through.
The correct implementation, as seen from my perspective, would be that the formatting function were called once for each tick in the xAxis, regardless of how many series are added to the plot.
I have written code in jsfiddle.net/udgeet/VUb5r/
I have to disable the previously selected date
You can use datePicker's beforeShowDay option to specify which dates you want to enable or disable.
Then it's just a case of writing a functions to
a) get the dates from the select into an array:
function daysToDisable() {
var dates = [];
for (i = 0; i < $('#inputdates option').length; i++) {
dates[i] = new Date($('#inputdates option').eq(i).val()).toString();
}
return dates;
}
and b) return true or false if the current date is in the array
function disableDates(date) {
var days = daysToDisable();
for (i = 0; i < days.length; i++) {
if ($.inArray(date.toString(), days) != -1) {
return [false];
}
}
return [true];
}
http://jsfiddle.net/vy562/1/