This question already has answers here:
Highlight dates in specific range with jQuery's datepicker
(7 answers)
Closed 6 years ago.
I'm using jQuery UI to display an inline datepicker in this i have a start date and an end date. I want to highlight the dates in between them.
You can use the jQuery UI datepicker beforeShowDay function and inside it check if the date must be highlighted according to your range.
A function takes a date as a parameter and must return an array with
[0] equal to true/false indicating whether or not this date is
selectable, 1 equal to a CSS class name or "" for the default
presentation, and [2] an optional popup tooltip for this date. It is
called for each day in the datepicker before it is displayed.
Example:
var date1 = new Date(2013, 4, 6);
var date2 = new Date(2013, 4, 17);
$(document).ready(function () {
$('#datepicker').datepicker({
beforeShowDay: function (date) {
debugger
if (date >= date1 && date <= date2) {
return [true, 'ui-state-error', ''];
}
return [true, '', ''];
}
});
});
Here is a working fiddle: http://jsfiddle.net/IrvinDominin/zz9u4/
Related
using highcharts#9.1.1
I am rendering a chart with initial rangeSelector = 1y but it's not rendering properly, the chart selects the last year of data instead of the first year. my data is ordered asc by timestamp btw.
same happens when I explicitly select a range, it computes the range from the current end date in the slider as opposed to the start date.
how can I make it behave differently?
https://jsfiddle.net/6vLgdrx7/4/
You can use setExtremes method in chart's load event and set the initial selected area.
chart: {
...,
events: {
load: function() {
const xAxis = this.xAxis[0];
xAxis.setExtremes(
xAxis.dataMin,
xAxis.dataMin + (xAxis.max - xAxis.min),
true,
false
);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/hm4xLzft/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I am trying to get the buttontext of datepicker (which defaults to an ellipsis), to set itself as the value of the input.
I have multiple datepickers on the page, and unlike my example below I have an icon instead of a text input. I would like the value itself to show on the tooltip that appears when you hover over the icon.
I have tried - buttonText: $(this).val() as an option but it doesn't pick anything up
Example - http://jsbin.com/unolot/3/
So my question - How do I get the buttontext of the datepicker input to match the value dynamically?
You have to handle two cases:
When the selected date changes: use the onSelect event to change the button's title attribute
On initial rendering: unfortunately, the datepicker does not implement the widget factory (yet) so there is no create event, you'll have to update the title attribute manually after the widget has initialized.
Don't forget to set the default date of the picker to the initial value of the field, otherwise the default selected date is "today"
Something like this:
// as you have several instances, loops through them
$(".deadline_picker_on").each(function() {
var dt = $(this);
dt.datepicker({
showOn: "button",
buttonText: '',
// set the default date to the value of the field
defaultDate: dt.val(),
duration: 100,
dateFormat: 'yy-mm-dd',
showOptions: {
direction: 'right'
},
onSelect: function(dateText, inst) {
// on data selection, change the title attribute of the button
$(this).next().attr('title', dateText);
}
})
// get the button (next element)
.next()
// set the title attribute with the formatted initial date from the picker
.attr('title', $.datepicker.formatDate('yy-mm-dd', dt.datepicker('getDate')));
});
The datepicker defaults to the max date even though a default date has been provided. The following code sets the min, max & defaultDate for the date picker. However, when displayed the textbox and the default date in the date picker is set to the max date.
Is this is a datepicker bug?
var from = new Date(parseInt(dict["from"].substr(6)));
var to = new Date(parseInt(dict["to"].substr(6)));
$("#PlanDate").datepicker('option', {
dateFormat: "mm/dd/yy",
defaultDate: $.datepicker.formatDate("mm/dd/yy", from),
minDate: from,
maxDate: to
});
how can i show or display only years in JQuery UI Calendar?
I need to do a dropdown list with years without taking care the month, just years.
Thanks in advance
$( "#datepicker" ).datepicker({
changeMonth: false,
changeYear: true
});
http://jqueryui.com/demos/datepicker/#dropdown-month-year
Alternatively, if you just want a list of years, you can generate it without jQueryUI:
var i,yr,now = new Date();
for (i=0; i<10; i++) {
yr = now.getFullYear()+i; // or whatever
$('#select-year').append($('<option/>').val(yr).text(yr));
};
If you want a jquery UI datepicker which shows only the year, try this:
stepMonths: 12,
monthNames: ["","","","","","","","","","","",""]
Result: no month name is shown.
I also used this to hide the calendar-part of the datepicker:
<style>.ui-datepicker-calendar { display: none; } </style>
var i,yr,now = new Date();
for (i=0; i<10; i++) {
yr = now.getFullYear()+i; // or whatever
$('#select-year').append($('<option/>').val(yr).text(yr));
};
This function works very well but it has some error
It display year 3 times.
When we select second time the data display with previous selected data.
I need a specific behavior of jQuery UI Datepicker:
By clicking on 'Prev/Next Month' current day of month must be automatically set in the previous/next month.
e.g.: default date was set to 8/25/2011, after clicking 'Next month' (or selecting September in dropdown), 9/25/2011 must be automatically selected (but not populated to input and datepicker itself must not disappear, so user can change this default day of month).
Thanks for advice.
You can make use of the beforeShowDay event.
var defaultDay = 15;
$('#datepicker').datepicker({
beforeShowDay: function(date) {
if (date.getDate() == defaultDay)
return [1, 'ui-state-highlight ui-state-active']; // can replace with a customised class
return [1, ''];
},
defaultDate: '07/' + defaultDay + '/2011'
});
You can assign a customised class yourself and style it to your heart's content.
Example: http://jsfiddle.net/william/nNmg2/
Note: you may need to take care of double-digit padding, if defaultDay is 1 to 9.