I have used Kendo Datepicker (kendo-date-picker)into one of my projects and now I want to restrict the date selection into current month. Yes, I can do it programmatically, but I want to know whether is there any configuration option to restrict the date selection into current month.
For example, if I am in April 2015, I should not be able to select any date outside of April 2015.
You can try this way:
$(document).ready(function() {
// JavaScript counts months from 0 to 11. January is 0. December is 11.
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
$("#datepicker").kendoDatePicker({
min: firstDay,
max: lastDay
});
});
See this Demo
You can override the style to hide the other month dates.
.k-other-month {
visibility: hide;
}
Related
I use the DHTMLX Scheduler in Timeline view for a project and the working hours are from 7AM to 5PM. I was able to make an AM/PM view per day but the first_hour and last_hour configs are not respected in the view. The screenshot shows more. The first event in the morning should be displayed far more left as it starts at 7:30Am.
My config:
scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.section_custom = "Section";
scheduler.config.dblclick_create = false;
scheduler.config.edit_on_create = false;
scheduler.config.details_on_dblclick = false;
scheduler.config.details_on_create = false;
scheduler.config.start_on_monday = true;
scheduler.config.first_hour = 7;
scheduler.config.last_hour = 17;
scheduler.config.full_day = true;
scheduler.config.mark_now = false;
scheduler.config.drag_move = false;
scheduler.config.drag_resize = false;
//===============
//Configuration
//===============
scheduler.createTimelineView({
name: "timeline",
x_unit: "hour",
x_date: "%A",
x_step: 12,
x_size: 14,
x_start: 0,
x_length: 14,
y_unit: scheduler.serverList('teams'), // sections and events from same ajax call
y_property: "team_id",
render: "bar",
section_autoheight: false,
dy: 30,
dx: 100,
// first_hour: 7,
// last_hour: 17,
second_scale: {
x_unit: "day", // unit which should be used for second scale
x_date: "%D %j %M"
}
});
Any help will be appreciated.
EDIT:
After update based on the answer here the result:
first_hour, last_hour configs applied for Y-axis in Day, Week, Units views (check Documentation).
Currently, to hide hours at the beginning and end of the day in the Timeline view, you should have only 1 X-axis like in this sample. I.e. visible part of the event is from 10 to 18 because of first_hour, end_hour properties of createTimelineView method. Check the screenshot.
There is also ignore_[viewName] function which can be used to hide interval that equal to min step of the scale (12 hours in your case).
This could help solve your issue if set min step = 6 (hours) and disable 6-7 AM and 5-6 PM by addMarkedTimespan. I tried to create a snippet for you http://snippet.dhtmlx.com/46ba545ad , but found out that the second part of this condition if(date.getHours() < 6 || date.getHours() > 17){ is not working correctly. The event can be created until 6 PM. We will fix it ASAP, but now I can't specify the exact time. I suggest you use the first way with 1 scale to solve the issue.
I'm using the date picker to allow a user to select start and end dates.
When the page first loads, both date pickers will display the current month the first time the calendar is opened.
However, I want the start datepicker to open up a view from one year in the past.
I've looked through the api (options and methods) and haven't found anything to specify a month.
Has anybody tried this?
I don't quite get what view means. Just shooting in the dark - if you want to limit the start to 1 year in the past or on certain month in the past, there is a configuration option min.
From the Kendo examples:
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
min: new Date(2011, 0, 1) // sets min date to Jan 1st, 2011
});
</script>
Update:
var datepicker = $("#datepicker").data("kendoDatePicker");
var d = new Date ();
$("#datepicker").kendoDatePicker({
value: new Date (d.setFullYear(d.getFullYear() - 1))
});
So this should open the "view" at this day 1 year ago. Live at the Dojo
There is a property called dateView that can have the value set.
Dojo Demo
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.bind('open', function() {
if (this.value() !== this.dateView.value()) {
this.dateView.value(null);
}
});
datepicker.dateView.value(dt);
This will update the value in the popup calendar without updating the value of the widget itself.
Edit: This actually causes a bug where clicking the selected dateView value doesn't update the actual picker value. I've added a handler for the open event to take care of the mismatch and clear the selected dateView value.
I have one kind of scenario using date picker. I have date picker with max date=current date + 10 days,on page load only i want to show date more than the max date,but I'm allowing user to enter only up to max date. Is it possible. Without looking maxing date i want to display only the date what ever i want.code:-
var datepicker = $("#date" + uid).data("kendoDatePicker");
var addDays = new Date();
if (arr[1] == "") {
var d = new Date();
datepicker.min(new Date());
datepicker.max(new Date(d.getDate() , d.getMonth(), d.getDate()+ parseInt(arr[1]) - parseInt(1)));
}
I don't know if this is achievable. But what if you try to add two date pickers instead? One that display only the text, and the other only the calendar button. You need to play a bit the CSS, but I think it could spare you a lot of time.
I am trying to set a specific time to two variables but can't seem to correctly format the syntax. I want to be able to set Shift 1 and Shift 2 off of certain times indicated below.
I want to only be able to use these times in an IF statement so that a radio button can be checked by default. Day Shift button and a Night Shift button. If the current time is in between shift 1, then day shift button is checked.
Date.prototype.currentTime = function(){
return ((this.getHours()>12)?(this.getHours()-12):this.getHours()) +":"+ this.getMinutes()+((this.getHours()>12)?('PM'):'AM'); };
var d1= new Date();
var d2 = new Date();
d1.setHours(7);
d1.setMinutes(10);
d2.setHours(19);
d2.setMinutes(10);
alert(d1.currentTime());
alert(d2.currentTime());
Thanks Any help is appreciated.
You do not need to compare Date objects for your use,
just compare the hours as integers to the integer from now.getHours():
var now= new Date().getHours();
if(now>6 && now<19){
//check day shift button;
}
// else check niteshift button
You may try this:
http://jsfiddle.net/apq59j9u/
Date.prototype.currentTime = function(){
return ((this.getHours()>12)?(this.getHours()-12):this.getHours()) +":"+ this.getMinutes()+((this.getHours()>12)?('PM'):'AM'); };
var d1= new Date();
var d2 = new Date();
d1.setHours(7);
d1.setMinutes(10);
d2.setHours(19);
d2.setMinutes(10);
alert(d1.currentTime());
alert(d2.currentTime());
Getting the Data
There are a number of different ways to do this. First here is a way to get the data from the date object:
var d = new Date();
var n = d.toTimeString();
Unfortunately, this will output something like "12:30:30 GMT-0500 (Eastern Standard Time)"
You can also try the getHours() and getMinutes functions to get the hours and minutes in your current timezone.
var d = new Date();
var hours = d.getHours();
var minutes = d.getMinutes();
Setting the Data
This is pretty easy to do, just as getting the data from a date object. Use the following code to set the time to what you would like. Replace the numbers where you see 11 to conform to your needs.
NOTE: This time is in military style hours! 1 = 1am, 13 = 1pm, ect.
var d = new Date();
d.setHours(11);
d.setMinutes(11);
d.setSeconds(11);
Result: 11:11:11
How do I remove the past dates from the full calendar. SO when the calendar loads it should display only current month's date. I could disable the past dates but I need to remove it from the current month.
Use the property visStart, this will let you control what the first visible day on the calendar is. You can set that to DateTime.Now() (c#) or Now = new Date() (javascript)
http://arshaw.com/fullcalendar/docs/views/View_Object/
This will stop the past dates from showing up the calendar.
I don't have the solution for removing dates, but this is what I'm using for when someone clicks on a date and trying to make an appointment thats in the past.
var date = new Date();
select: function(start, end, allDay) {
if(start < date) {
alert('Cannot select past dates.');
return;
}
},