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);
});
Related
Here I've used jquery-ui.js so that it shows numbers from 0 to 2000000 and I'd like to show long number formatted like 2,000,000
<div class="slider>
<a id="minamount" style="">0</a>
<a id="maxamount" style="">2000000</a>
</div>
javascript:
$(".slider").slider({
min: 0,
max: 2000000,
values: [0, 2000000],
range: true,
step: 10,
slide: function (event, ui) {
$("#minamount").html(ui.values[0]);
$("#maxamount").html(ui.values[1]);
}
});
You can use Intl.NumberFormat() for doing it like -
const numberFormat = new Intl.NumberFormat();
$(".slider").slider({
min: 0,
max: 2000000,
values: [0, 2000000],
range: true,
step: 10,
slide: function (event, ui) {
$("#minamount").html(numberFormat.format(ui.values[0]));
$("#maxamount").html(numberFormat.format(ui.values[1]));
}
});
You can pass a bunch of values for your locale according to the documentation if you want it formatted according to a specific locale.
Note: On the initial load, the slide function is not called, in which case, you could manually call the slider('values') function of the slider after initialization to manually set the HTML in the beginning.
EDIT:
Find a sample Fiddle to play around
To format a string using thousands separator (eg 12,345) you can use toLocaleString().
$("#minamount").html(ui.values[0].toLocaleString());
See snippet below.
for (var i = 1.234; i < 10000000; i *= 10)
{
console.log(i.toLocaleString());
}
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
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>
Is there any option to avoid top space.
Actually I am looking solution to show as full width and full height.
demo http://jsfiddle.net/ugFmE/12/
var g = new JustGage({
id: "spedometer",
title: "Monthly expense",
value: 1986,
min: 0,
max: 2450,
shadowOpacity: 0,
relativeGaugeSize: true
});
Add some css to the div to make it go up...
#spedometer{
margin-top: -##px
}
where '##' is the amount of pixels you would like to move the div towards the top..
demo http://jsfiddle.net/ugFmE/17/
Use style attribute of div tag and change value of top-margin to negative. I hope that would help you
<div id="g1" style= margin-top:-100px;></div>
window.onload = function () {
var g1 = new JustGage({
id: "g1",
value: getRandomInt(0, 100),
min: 0,
max: 100,
relativeGaugeSize: true
});
}
http://jsfiddle.net/ntSrb/4/
Problem: The second slider should decrement in steps of 1 as the first slider changes by steps of 3
I have inspected the changes of the second slider and its as if the first time the first slider changes it works, after that the second slider just doesnt register new values
Also the second slider jumps randomly if you pull the first slider by large steps.
This is a simplified version of my problem because in reality I have 4 sliders which will affect eachother in a similar way (as one slider increments by 3, then the three other sliders decrements by 1)
HTML
<span id="firstspan">25</span>
<div id="firstrange" style="max-width: 300px;"></div>
<span id="secondspan">25</span>
<div id="secondrange" style="max-width: 300px;"></div>
JS
function updateSpans(numberChange) {
var oldval;
var newval;
oldval = $("#secondrange").slider("value"); //number
newval = Math.round(oldval + numberChange / 3);
$('#secondrange').slider("option", "step", 1);
$("#secondrange").slider("option", "value", newval);
$('#secondrange').slider("option", "step", 3);
$("#secondspan").text(newval);
}
$(function () {
$("#firstrange").slider({
orientation: "horizontal",
min: 0,
max: 100,
value: 25,
step: 3,
slide: function (event, ui) {
var currentvalue = ui.value; //number
var oldvalue = parseInt($('#firstspan').text()); //number
$("#firstspan").text(currentvalue);
updateSpans(oldvalue - currentvalue);
},
});
});
$(function () {
$("#secondrange").slider({
orientation: "horizontal",
min: 0,
max: 100,
value: 25,
step: 3,
});
});
Please see this jsFiddle Link. I have change your jsfiddle code and now it works. Please check. Change in line 22:
change: function(event, ui){