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.
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>
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'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'm fairly javascript and jquery. I'm trying to add a slider to my webpage. It's a basic slider where anyone can select a value between 0-100. I'm not sure how to mark SOME intervals in the middle.
This is the code i have so far
<script>
$(function() {
var temp = 0;
$( "#slider" ).slider({
animate: true,
value:temp,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val(ui.value );
},
stop: function(event, ui) {
temp = ui.value;
//Do something
}
});
$( "#amount" ).val($( "#slider" ).slider( "value" ) );
});
</script>
It is functioning properly. What i wanna try to do is add interval markers at 0.25,50,75 and 100.
I have gone through a few questions on SO but not sure how to proceed with the implementation. Would appreciate the help.
I tried this implementation: http://jsbin.com/iwime but this is not what i am trying to do as i just want the ticks to appear at those regular intervals but users shold stll be able to select other values.
Thanks
Cheers
I am guessing you want something like this: http://jsbin.com/iwime/116
So, instead of using the number of ticks in the max option of slider, you use whatever max units you want to provide, e.g. 100. Then in refershTicks(), update the algorithm to toggle the class.
Slider settings:
var slider = $("#slider").slider({
...
max: 100, // the only change
...
});
And the refreshTicks() method:
function refreshTicks() {
var s = slider
, lo = s.slider("values", 0), hi = s.slider("values", 1);
var max = s.slider('option', 'max');
s.find(".tick").each(function(i) {
var i = (i + 1) * (max/ticks.length) - (max/ticks.length)/2; // the updated algorithm
var inRange = (i >= lo && i < hi);
$(this)
[(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header")
[(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content");
});
}
Similar to this SO Question : The answer from Bijan might help.
The implementation of jQuery UI slider he suggest may help you to find a solution:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/
I want to use jquery fullcalendar but I want to hide certain hours.
I want to show the calendar from 8.00am->11.00am and from 16:00pm->19:00pm
So the hours between 11:00am and 16:00pm must be 'hidden'.
I don't see an option to do this :
How can I force this ?
thx in advance
Kristof
You don't want to modify fullcalendar source because you want to be up to date with official branch.
Then the only way is to hide appropriate rows (hours) after fullcalendar initialization with javascript:
//hide rows with unused hours. Class names can be found in html source of
//rendered fullcalendar (fc-slotxx)
for(var i=0; i<gapshours.length; i++)
{
var gapclass = '.' + gapsclasses[i];
$(gapclass).hide()
}
//display hours for clipped borders
for(var i=0; i<sethourhours.length; i++)
{
var hourclass = '.' + sethourclasses[i] + ' th'
$(hourclass).text(sethourhours[i]);
}
After that you must remember of clipping and moving events' periods just for view purposes.
It would be very helpful to see your code; here's my best guess.
In your fullCalendar initialization code, I would use an event generating function (see event generating function)
events: function(start,end,callback){
//get your data from wherever you're getting it
var events = some_ajax_method(start, end);
//filter it down to the times you want to show
events = $.map(events, function(event){
if (event meets time criteria)
return event
else
return null;
});
callback(events);
}