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
});
Related
I am trying to setup a date field using Gravity Forms in wordpress, to display the min date 2 days after if current time is >= 5pm and excluding weekends.
I found the solution for excluding the weekends at
Gravity Forms jQuery No Weekends
Here is the solution by https://stackoverflow.com/users/1766031/ian-rogers
jQuery(document).bind('gform_post_render', function(){
// destroy default Gravity Form datepicker
jQuery("#input_1_1").datepicker('destroy');
// create new custom datepicker
var oneWorkingDays = new Date();
var adjustments = [0, 1, 1, 1, 1, 1, 0]; // Offsets by day of the week
oneWorkingDays.setDate(oneWorkingDays.getDate() + 1 + adjustments[oneWorkingDays.getDay()]);
jQuery("#input_1_1").datepicker({ beforeShowDay: jQuery.datepicker.noWeekends, minDate: '+1d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true });
});
So, I will appreciate if someone could help me integrate the other solution, that is displaying the min date 2 days after if current time is >= 5pm.
I think I got an answer by myself..
Here is the code that I used
<script type="text/javascript">
jQuery(document).bind('gform_post_render', function(){
jQuery("#input_1_1").datepicker('destroy');
jQuery("#input_1_1").datepicker({
minDate: new Date().getHours() >= 12 ? 2 : 0,
beforeShowDay: jQuery.datepicker.noWeekends, minDate: '+1d',
});
});
</script>
I want to disable previous date and show only present and future dates. I need only datetimepicker. Not datepicker. I applied this method
$(function() {
$( "#datepicker" ).datetimepicker({ minDate: 0});
});
Use the following options:
//beforeShowDay: $.datepicker.noWeekends, //optional
constrainInput: true, // restrict keyboard input
minDate: '+1d' // set minimum date to tomorrow
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 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.