I'm using jQuery UI 1.8 and I would like to hide the year from the user in both the popup and the textbox. Essentially instead of picking the day, month and year I want the user to just pick the day and month.
Hiding the year in the textbox is easy enough, the code shown below will do that. I'm stumped on how to hide the year from the popup - so it would say "April" instead of "April 2010".
$(function() {
$("#beginDateRange").datepicker({ dateFormat: 'mm/dd' });
});
<input type="text" name="beginDateRange" id="beginDateRange" />
Any help would be greatly appreciated.
I came across this thread in my search for a good way to do this, and here's what i came up with.
in my css i have a
.BirthdayDatePicker .ui-datepicker-year
{
display:none;
}
and this is how i set up my datepickers that i don't want to show the year on:
$('.DateTextBox.NoYear').datepicker({
beforeShow: function (input, inst) {
inst.dpDiv.addClass('BirthdayDatePicker');
},
onClose: function(dateText, inst){
inst.dpDiv.removeClass('BirthdayDatePicker');
}
});
basically i add the class just before it shows, and take it off when it hides it, so that other date pickers on the page arn't affected by it.
just incase anyone ever needs to hide the year only on specific pickers on a page and doesn't want to mess with the internals of jQuery.
I dont think this option is exposed va the api.
I belive that the easiest way is to change the stylesheet.
Change the ui-datepicker-year class to display: none
Another option would be to edit the source so it isnt rendered at all,
to do that you can remove this part of the code:
// year selection
if (secondary || !changeYear)
html += '<span class="ui-datepicker-year">' + drawYear + '</span>';
else {
// determine range of years to display
var years = this._get(inst, 'yearRange').split(':');
var thisYear = new Date().getFullYear();
var determineYear = function(value) {
var year = (value.match(/c[+-].*/) ? drawYear + parseInt(value.substring(1), 10) :
(value.match(/[+-].*/) ? thisYear + parseInt(value, 10) :
parseInt(value, 10)));
return (isNaN(year) ? thisYear : year);
};
var year = determineYear(years[0]);
var endYear = Math.max(year, determineYear(years[1] || ''));
year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
html += '<select class="ui-datepicker-year" ' +
'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
'>';
for (; year <= endYear; year++) {
html += '<option value="' + year + '"' +
(year == drawYear ? ' selected="selected"' : '') +
'>' + year + '</option>';
}
html += '</select>';
}
I haven't tried removing the code but it should work.
I did try hiding it using css and that does work (in firefox anyway :) )
HTH
Very old question, but I just needed to do this myself and here's an alternate method that might be useful to somebody; a quick and dirty fix that will enable your other datepickers to continue working, provided you do NOT need the changeYear functionality is to set changeYear to true on the datepickers you DON'T want a year showing up, then add the CSS:
select.ui-datepicker-year { display:none }
VIKSME Hide year http://jsfiddle.net/tocv/e5cvA/
CSS
.ui-datepicker-year
{
display:none;
}
HTML
<div id="datepicker"></div>
</div>
JavaScript
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: false
});
});
The attribute
changeYear:false;
select.ui-datepicker-year { display:none }
sometimes change dropdown to span.<span></span>
So add this css code.
span.ui-datepicker-year { display:none }
Related
I need to disabled future weeks for jqueryUI calender, i tried something which is disabled future date. but i want future week disable and it's disabled the other dates of week 52 as well. please if anyone can help me in this. below is link of my work. in this you can see disabled dates of week 52. i want whole week selectable.
Fiddle Link of so far i done.
<input type="text" class="form-control weekcal-x" name="start" id="start" custom="" />
$(".weekcal-x").datepicker({
showWeek: true,
firstDay: 1,
maxDate: new Date,
onSelect: function(dateText, inst) {
$(this).val("Week " + $.datepicker.iso8601Week(new Date(dateText)) + ', ' + $.datepicker.formatDate("yy", new Date(dateText)));
}
}).datepicker('widget').addClass('ui-weekpicker');
$('.ui-weekpicker').on('mousemove', 'tr', function() {
$(this).find('td a').addClass('ui-state-hover');
});
$('.ui-weekpicker').on('mouseleave', 'tr', function() {
$(this).find('td a').removeClass('ui-state-hover');
});
Try this
maxDate: +7 instead of maxDate: new Date
Update
Get the first and last day of current week :
var currentDate = new Date; // get current date
var first = currentDate.getDate() - currentDate.getDay() + 1; // First day is the day of the month - the day of the week
var last = first + 6; // last day is the first day + 6
var firstday = new Date(currentDate.setDate(first));
var lastday = new Date(currentDate.setDate(last));
Now you can use them as you want like maxDate: lastday, minDate:firstday
Highcharts does a great job auto-formatting dates both on the x-axis and in tooltips. Unfortunately I need a custom function to format my y-values, and /plotOptions/line/tooltip/pointFormat accepts only a format string and not a function, so I have to set /tooltip/formatter instead. How do I get hold of the formatted date (e.g. Oct'13 or 20. Oct) as shown on the x axis? I don't seem to have access to point.key from there, only the raw millis value.
http://jsfiddle.net/9Fke4/
You can use dateFormat()
tooltip: {
formatter: function() {
return '<b>' + Highcharts.dateFormat('%b\' %d',this.x) + ':</b> ' + this.y;
}
},
http://jsfiddle.net/9Fke4/1/
FWIW, this was answered in a Highcharts issue on Github
formatter: function() {
var tooltip = this.series.chart.tooltip,
item = this.point.getLabelConfig(),
header = this.series.chart.tooltip.tooltipFooterHeaderFormatter(item);
return header + this.y;
}
Corresponding fiddle:
http://jsfiddle.net/9Fke4/12/
If you are using a shared series:
tooltip: {
formatter: function (tooltip) {
var header,
s = [];
$.each(this.points, function(i, point) {
if(header == null) {
var config = point.point.getLabelConfig();
header = tooltip.tooltipFooterHeaderFormatter(config);
}
s.push(point.y);
});
return header + s.reverse().join('<br>');
},
shared: true
}
conver the raw milliseconds to a date object using
var currentDate = new Date (tome in milliseconds)
in the tootip/formatter function you have defined.
this will give you good control over the date. you can use currentDate.getMonth(), getDate(), getDay(), etc methods to get the information you want from that date.
build a string with the above info and return.
I hope this will help you.
The solution I ended up with is to pre-format the y-values and store them as part of the series data; the pre-formatted values can then be referenced from the tooltip headerFormat and pointFormat, where they can be used along with {point.key}, which contains the auto-formatted date (and which is not available when providing a custom tooltip formatter):
http://jsfiddle.net/uG3sv/
Is there a more efficient way for displaying a tool tip once a cell is hovered? Using the structure attribute to format the datagrid, is there a way to use formatter to display a dijit toolTip rather than using the html title attribute.
Here is the column in which the toolTip is displaying.
var subscriberGridLayout = [
{
name: " ",
field: "ExpirationDate",
formatter: function(value){
if(value){
expDate = formatDateIE(value);
return toolTip();
}
else
return " ";
},
styles: "text-align: center;",
width: "30px"
},
Here is the function that displays a tooltip icon through the image tag but instead of a dijit toolTip it simply uses html's title to display a popup.
function toolTip(){
src = "'/Subscriber/resources/images/icons/icon_error.gif'/>";
if(dojo.date.difference(today, expDate) <= 0 ){
message = "Credential expired.";
return "<img title='"+ message + "' src=" + src + "";
} else if(dojo.date.difference(today, expDate) <= 60) {
message = "This Subscriber will expire in " + dojo.date.difference(today, expDate) + " days."
+ "
To prevent an interruption in the Subscriber’s access, please sumbit a request to " +
"renew the Subscriber within 30 days of the expiration date.";
return "<img title='"+ message + "' src=" + src + "";
} else {
return " ";
}
}
I would do something like:
new Tooltip({
connectId: grid.domNode,
selector: "td",
getContent: function(matchedNode){
return matchedNode.innerText
}
});
With grid.domNode you can get the generated DOM of your widget. A grid generates a table-structure, so you can get the cells by using the selector and getContent properties.
I must say it's not really the correct way to do it because now you're playing with the internal structure of the Dojo widget. If they once decide not to use a table as DOM structure your code won't work.
But I don't think there is a better way to achieve this, in the end you will always have to translate the Dojo cell to a DOM node (because tooltips are DOM based). You can of course connect a tooltip to each cell, but I tried that before and it was a little buggy (sometimes the tooltip didn't pop up).
I also made a JSFiddle to show you a working example.
Thanks in advance for your cooperation,
I'm using this JQUERY Date picker as shown in this image :
http://techblog.willshouse.com/wp-content/uploads/2009/06/datepicker.jpg
and for more information :
I have an ASP.net site retrieving data from SQL server 2008..
one of the admin functionalities is to change official holidays dates and save them in the DB in table Holidays
my question is:
how to disable these official holidays in the datepicker , so i prevent the user to select these specific days.
following this link:
jQuery UI Datepicker - Disable specific days
but I’m afraid I can’t use this solution manner , because the official holidays can’t be listed in an array since they are changed periodically many times by the admin of the site.
So, I don’t need to add them to the array list every time the admin change them.
I mean, is there any way to disable the selected dates from the table "Holidays" in the database?
Thanks in advance,
--- and also , i try to use this answer...
/* create an array of days which need to be disabled */
var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"];
/* utility functions */
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
//console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
return [false];
}
}
//console.log('good: ' + (m+1) + '-' + d + '-' + y);
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date) : noWeekend;
}
/* create datepicker */
jQuery(document).ready(function() {
jQuery('#date').datepicker({
minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 5, 31),
dateFormat: 'DD, MM, d, yy',
constrainInput: true,
beforeShowDay: noWeekendsOrHolidays
});
Here is a way to disable specific dates from being selected:
jQuery - Datepicker - Disable Specific Dates
Looking at the array in this link, instead of:
var unavailableDates = ["9-5-2011","14-5-2011","15-5-2011"];
You would have something like:
<?php
$result = mysql_query("SELECT `date` FROM `Holidays`;")
foreach ($result as $holiday){
//may need to format $holiday here before using
$dates .= "'".$holiday."',";
}
//remove the last comma
$dates = substr($dates,0,-1);
?>
var unavailableDates = [<?php echo $dates; ?>];
Perhaps someone else can provide an ASP.NET solution?
For anyone's interest, here is how I did it with ColdFusion
<cfquery name="qHolidays" datasource="#ds#">
SELECT holiday_date
FROM public_hols
ORDER BY holiday_date
</cfquery>
<cfset disabledDays = '"1-1-2000"'>
<cfloop query="qHolidays">
<cfset disabledDays = disabledDays & ',"' & DateFormat(holiday_date,'d-m-yyyy') & '"'>
</cfloop>
<cfoutput>
<script type="text/javascript">
/* create an array of days which need to be disabled */
var unavailableDates = [#disabledDays#];
//var unavailableDates = ["9-5-2011","14-5-2011","15-5-2011"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
day = date.getDay();
if ( $.inArray(dmy, unavailableDates) < 0 && (day > 0) && (day < 7) ) {
return [true,"","Work Day"];
} else {
return [false,"","Public Holiday"];
}
}
/*
$('##iDate').datepicker({ beforeShowDay: unavailable });
*/
jQuery(document).ready(function() {
$(function() {
$('##dateentered').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
numberOfMonths: 3,
constrainInput: true,
beforeShowDay: unavailable
});
});
});
</script>
</cfoutput>
I'm using jQuery UI's DatePicker to select a date of birth for consumers on my website. It is currently showing with the month and year via drop downs When, for example, I restrict the years to -18y, via maxDate, the month drop down does not show all of the months when the year 1993 is selected. It only shows the months up until the maximum months.
In usability testing, we've found that our demographic tends to click the month of their birth, then the year, then the day.
Is there a way to show all of the months, even if the dates within that month are not selectable?
Here is the code used to show the DatePicker:
$('.DobWidget').datepicker({
showOn: 'both',
buttonImage: '/media/img/admin/icon_calendar.gif',
buttonImageOnly: true,
dateFormat: js_date_format, // mm/dd/yyyy
constrainInput: false, // Handled server-side for type-in.
changeMonth: true,
changeYear: true,
maxDate: '-18y',
minDate: '-110y',
showButtonPanel: true,
onChangeMonthYear: function(year, month, inst) {
if (inst.currentDay != 0) {
$(this).datepicker("setDate", new Date(year, month - 1, inst.currentDay));
}
}
});
I am currently using jQueryUI v.1.8.16, and jQuery v.1.6.3, both provided by the Google AJAX API's.
Fix for jquery ui 1.8.17
I also had this problem I got in to work by changing some things in the jquery code. Now I see all months and I can select them but dates will still be unselectable as you want.
In _generateHTML function in the if statement you add maxDraw.setMonth('11'):
if (maxDate) {
maxDraw = (minDate && maxDraw < minDate ? minDate : maxDraw);
maxDraw.setMonth('11');
while (this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1)) > maxDraw) {
...
}
}
In _generateMonthYearHeader function in the for loop of the else statement you change:
for (var month = 0; month < 12; month++) {
if ((!inMinYear || month >= minDate.getMonth()) &&
(!inMaxYear || month <= maxDate.getMonth()))
monthHtml += '<option value="' + month + '"' +
(month == drawMonth ? ' selected="selected"' : '') +
'>' + monthNamesShort[month] + '</option>';
}
becomes
for (var month = 0; month < 12; month++) {
if ((!inMinYear || month >= minDate.getMonth()) &&
(!inMaxYear || month <= 11))
monthHtml += '<option value="' + month + '"' +
(month == drawMonth ? ' selected="selected"' : '') +
'>' + monthNamesShort[month] + '</option>';
}
In _restrictMinMax you add maxDate.setMonth('11'):
...
var maxDate = this._getMinMaxDate(inst, 'max');
maxDate.setMonth('11');
var newDate = (minDate && date < minDate ? minDate : date);
...
In _isInRange you add maxDate.setMonth('11'):
var minDate = this._getMinMaxDate(inst, 'min');
var maxDate = this._getMinMaxDate(inst, 'max');
maxDate.setMonth('11');
...