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.
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
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/
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')));
});
I've run into a conflict between javascript tools and my knowledge of javascript isn't quite advanced enough to solve it.
I'm using drupal's editablefields module to allow users to edit fields inline in the node views as apposed to editing them in node/%/edit.
Combined with this i'm using François Gélinas' jquery-ui-timepicker: http://fgelinas.com/code/timepicker/
The problem i run into is this, when called initially the timepicker is bineded to a dom element, for example:
#edit-field-days-start-time-und-0-value
using code like this:
$('#edit-field-days-start-time-und-0-value').timepicker();
This works great, and the timepicker pops up when the user clicks in the field, and they can click on a new hour it will update the field. But as soon as that update happens drupal's editablefields module updates the field and changes the field id to something like this:
#edit-field-days-start-time-und-0-value-1
Now the jquery-ui-timepicker is no longer binded to an element that exists, so if the user clicks on a second button in the widget, say the minutes, i get an error:
uncaught exception: Missing instance data for this timepicker
So my question is, how do i forcibly rebind the timepicker to a new ID? or alternatively, how do i block the drupal editablefields module from saving the update and changing the id of the field until the edit is complete?
Figured it out, a bit hacky but it works, maybe someone will find this one day.
// global timeout variable
var t=0;
// global variable to represent current time picker
var timepickerInst='';
function onSelectCallback(){
t=setTimeout("dateUpdateCallback()",50);
}
function onCloseCallback(){
}
function dateUpdateCallback(){
$=jQuery;
if( $('#'+timepickerID).length != 0 ){
t=setTimeout("dateUpdateCallback()",50);
}
else {
setupTimepicker($);
//jQuery(document).find('#'+timepickerID).focus();
}
}
function setupTimepicker($){
timepickerID = $('.form-item-field-days-start-time-und-0-value .text-full.form-text').attr('id');
$('.form-item-field-days-start-time-und-0-value .text-full.form-text').timepicker({
// Options
timeSeparator: ':', // The character to use to separate hours and minutes. (default: ':')
showLeadingZero: false, // Define whether or not to show a leading zero for hours < 10.
showMinutesLeadingZero: true, // Define whether or not to show a leading zero for minutes < 10.
showPeriod: true, // Define whether or not to show AM/PM with selected time. (default: false)
showPeriodLabels: true, // Define if the AM/PM labels on the left are displayed. (default: true)
periodSeparator: ' ', // The character to use to separate the time from the time period.
defaultTime: '08:00', // Used as default time when input field is empty or for inline timePicker
// Localization
hourText: 'Hour', // Define the locale text for "Hours"
minuteText: 'Min', // Define the locale text for "Minute"
amPmText: ['AM', 'PM'], // Define the locale text for periods
// Position
myPosition: 'left top', // Corner of the dialog to position, used with the jQuery UI Position utility if present.
atPosition: 'left bottom', // Corner of the input to position
onSelect: onSelectCallback,
onClose: onCloseCallback,
// custom hours and minutes
hours: {
starts: 02, // First displayed hour
ends: 21 // Last displayed hour
},
minutes: {
starts: 0, // First displayed minute
ends: 45, // Last displayed minute
interval: 15 // Interval of displayed minutes
},
rows: 4, // Number of rows for the input tables, minimum 2, makes more sense if you use multiple of 2
showHours: true, // Define if the hours section is displayed or not. Set to false to get a minute only dialog
showMinutes: true, // Define if the minutes section is displayed or not. Set to false to get an hour only dialog
// buttons
showCloseButton: true, // shows an OK button to confirm the edit
closeButtonText: 'Done', // Text for the confirmation button (ok button)
showNowButton: false, // Shows the 'now' button
nowButtonText: 'Now', // Text for the now button
showDeselectButton: false, // Shows the deselect time button
deselectButtonText: 'Deselect' // Text for the deselect button
});
}
jQuery(document).ready( function($) {
setupTimepicker($);
});
When a form load I want it to already have the current date plus 5 days. So its 2/22/2011, When the page loads the text box the datepicker belongs to should show 3/1/2011. I know how to set default date to 5 days from the current date but I need it to be in the text box when the page loads.
There is actually a much easier way.
$("#datepicker").datepicker();
$("#datepicker").datepicker("setDate", "+5d");
Just figured it out.
I must be missing something, you would do something like:
$(function() {
//set your date picker
$('#test').datepicker();
//get the current date
var yourDate = new Date();
//set the current date to today + 5 days
yourDate.setDate(yourDate.getDate() + 5)
//format the date in the right format
formatDate = (yourDate.getMonth() + 1) + '/' + yourDate.getDate() + '/' + yourDate.getFullYear();
//set the input value
$('#test').val(formatDate);
});
Working sample here here...