I tried to use Kendo Datetimepicker's configuration to set min time starts at 09:00 AM.
like below:
$("#txtAppt_Date").kendoDateTimePicker({
format: 'ddd M/d/yyyy h:mm tt',
min: new Date(2017, 0, 1, 9, 0, 0)
});
But I am only allow to set 2017-01-01's time only. Not work for 2017-01-02 or any other dates.
I want to have range between 09:00 AM to 11:00 PM for this Kendo Datetimepicker.
Please help.
Thanks.
Update
This question is solved: I referenced Setting DateTimePicker to show specific time range e.g. working hours only
You can set min and max as follows:
<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
value: new Date(2011, 0, 1, 9, 0, 0),
min: new Date(2011, 0, 1, 9, 0, 0),
max: new Date(2011, 0, 1, 23, 0, 0)
});
</script>
Pay attention that you should provide a value within the range of min and max.
See the embedded links above for more information.
Thanks to #Erik, here's a demo fiddle.
UPDATE
If what you want is to restrict the time 9-23 across multiple days, then there's a good answer here that demos it here
Related
How to rage of time in kendo datetime picker exapmle:
disable time range 03.01.2019 10:00am - 03.01.2019 10:30am
$("#datetimepicker").kendoDateTimePicker({
value: new Date(),
dateInput: true,
format: "MM/dd/yyyy HH:mm",
interval: 5,
timeFormat: "HH:mm",
min: new Date(yyyy, mm - 1, dd + 1, HH, MM, 0),
disableDates:[]
});
you might consider using DatePicker instead of DateTimePicker
$(document).ready(function() {
// create DatePicker from input HTML element
$("#datepicker").kendoDatePicker({
value: new Date(),
dateInput: true,
format: "MM/dd/yyyy"
});
});
Hope it helps!
Not sure how to go about it but I'm using vis.js in my project and I need to display a timeline of the open hours of a business. Is there a way to show only the business hours and not the whole 24 hours as having evening hours is pointless for my application.
I cannot seem to find options in the documentation to make this setting in my code options.
The documentation you are looking for is the 'Hiding Periods' example: http://visjs.org/examples/timeline/other/hidingPeriods.html
To hide weekends you provide any weekend dates per:
To hide a weekend, pick any Saturday as start and the following Monday as end and set repeat to weekly.
To hide times outside of e.g. 9am to 5pm you provide a range of any arbitrary day with a start time of 5pm and a finish time of 9pm:
{
start: '2017-03-04 17:00:00',
end: '2017-03-05 09:00:00',
repeat: 'daily'
}
Here is a small example below:
var container = document.getElementById('timeline');
// sample timeline entry
var items = new vis.DataSet([{
id: 1,
content: 'foo',
start: '2017-06-13 10:00:00',
end: '2017-06-13 16:30:00'
}]);
// Configuration for the Timeline
var options = {
// hide weekends - use any weekend and repeat weekly
hiddenDates: [{
start: '2017-03-04 00:00:00',
end: '2017-03-06 00:00:00',
repeat: 'weekly'
},
// hide outside of 9am to 5pm - use any 2 days and repeat daily
{
start: '2017-03-04 17:00:00',
end: '2017-03-05 09:00:00',
repeat: 'daily'
}
],
// start and end of timeline
start: '2017-06-01',
end: '2017-06-30',
height: '140px',
editable: false
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
<h3>Mon-Fri 9am to 5pm working hours timeline example</h3>
<div id="timeline"></div>
I'm working on a ASP.NET MVC Project. My kendoDatePicker was working great before I added an event of a checkBox. This event consist in changing the min date to 2015 or 2016 depending of checkBox state
This is my code:
#(Html.Kendo().DatePicker()
.Name("TxBxFechaInicial")
.Value(DateTime.Today.ToShortDateString())
.Format("dd/MM/yyyy")
.HtmlAttributes(new {style = "width:150px"})
)
Everything is okay here (today is January 18th):
$('#chk2015').click(function () {
if (this.checked) {
$("#TxBxFechaInicial").kendoDatePicker({
format: "dd/MM/yyyy",
value: new Date(2015, 0, 1),
min: new Date(2015, 0, 1),
});
} else {
$("#TxBxFechaInicial").kendoDatePicker({
format: "dd/MM/yyyy",
value: new Date(2016, 0, 1),
min: new Date(2016, 0, 1),
});
}
});
But after changing the min date it looks like this, ignoring the format, even if I manually change the date with the calendar.
The culture is already declared in the $(document).ready(function () with kendo.culture("es-MX"); also in Web.config with
<system.web>
<globalization culture="es" uiCulture="es-MX" />
</system.web>
I am working with flot jquery library to draw a chart
this is my code
chartOptions = {
xaxis: {
timeformat: "%H",
twelveHourClock: true,
as you see, i set the twelveHourClock option to true and yet I still get results like 14 18 20 ...
why please?
Update 1
I already tried to use %I %p in timeformat but then I got the following results, please check that the bellow values should be 8am 10am 12 ..... 8 pm
For zero padded 12 hour format,
xaxis: {
mode: "time",
timeformat: "%I %p",
tickSize: [1, "hour"],
twelveHourClock: true,
}
I am trying to use date range slider taking reference from here
everything went as per the documentation and I got the slider . now I need to access the minimum and maximum values from slider during movement. I tried to use min/max. bind as given in documentation. I couldn't acheive it.
my code is
<div id="slider"></div>
$("#slider").dateRangeSlider({
range: {
min: new Date(2012, 0, 1)
},
bounds: {
min: new Date(2012, 0, 1,00,00,00),
max: new Date(2014, 11, 31, 12, 59, 59)
},
defaultValues: {
min: new Date(2012, 0, 10,00,00,00),
max: new Date(2012, 11, 31,00,00,00)
},
});
how can I access the value as console.log() when the slider moves.
From the API link you posted:
Use the event valuesChanged when you want to intercept events once values are chosen. This event is only triggered once after a move.
$("#slider").bind("valuesChanged", function(e, data){
console.log("Values just changed. min: " + data.values.min + " max: " + data.values.max);
});