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
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'm not sure if this is a bug or what, but I'm getting a very strange behavior with jQuery mobile's datepicker.
When clicking a disabled date, the enabled dates disappear! WTF?
Please check out my jsFiddle for a very simple example: http://jsfiddle.net/X5qp8/
I'm modeling this after jquery's recommendation for the mobile hack: http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
I'm also rendering it to a div because I need a persistent calendar. Maybe these things just do not jibe...
I've also found that the bug lies in line 33 of their mobile extension, but it is unclear what they are attempting to do there:
$( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
var el = $(this);
// remove extra button markup - necessary for date value to be interpreted correctly
el.html( el.find( ".ui-btn-text" ).text() );
});
Line 33 is stripping the extra markup so that the datepicker plugin can parse the date for the plugins various events. I have recently found a solution that worked for me, but I am unable to get things working on your jsFiddle. I have commented out some of the extra markup that was being done for mobile styling. Take a look at my version of the updateDatepicker function and hopefully it will be helpful.
function updateDatepicker(){
// $( ".ui-datepicker-header", dp ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
$( ".ui-datepicker-prev, .ui-datepicker-next", dp ).attr("href", "#");
$( ".ui-datepicker-prev", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true});
$( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
// $( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c");
// $( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c");
// $( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false});
$( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date
$( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date
$( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
var el = $(this);
// remove extra button markup - necessary for date value to be interpreted correctly
el.html( el.find( ".ui-btn-text" ).text() );
});
};
remove the <div id="datepicker"></div> and replace
$("#datepicker").datepicker({minDate : '9/20/2012'});
by
$("#date").datepicker({minDate : '9/20/2012'});
and it will work
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
});
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.