I have something strange with jQuery datepicker.
If i choose a date with datepicker, it's ok, no problem.
But if i write a date directly in the input, for example : 19/05/1990 (french format)
When i write the first number of the year (here 1), jquery select automaticaly the date 2001 in my datepicker and remove the value on my input....
Do you have an idea ?
Edit : Here, all options i use
yearRange: "-113:+0",
changeMonth: true,
changeYear: true,
closeText: 'Fermer',
dateFormat: "dd/mm/yy",
prevText: '<Préc',
nextText: 'Suiv>',
currentText: 'Courant',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
'Jul','Aoû','Sep','Oct','Nov','Déc'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa']
If you want to prevent the jump to 2001 when you type 1 for the year you can override the behaviour of the plugin overriding the function _doKeyUp before create your instance.
var oldKeyUp = $.datepicker._doKeyUp;
$.datepicker._doKeyUp = function(event){
var inst = $.datepicker._getInst(event.target);
var tmpValue = inst.input.val();
var arr = tmpValue.split('/');
if (arr.length == 3){
if (arr[2].length == 4){
return oldKeyUp(event);
}
}
return false;
}
$( "#datepicker" ).datepicker({...});
With this the plugin will wait until you have the full 4 digits of the year (assuming the format "dd/mm/yy").
You need to specify the correct localization when you instantiate the datepicker() function.
Please see the localization documentation and example or the "Localization" section of datepicker's API (which specifically suggests using jquery.ui.datepicker-fr.js).
$( selector ).datepicker( $.datepicker.regional[ "fr" ] );
Please see a working example of the datepicker() "localized" for France at http://jsfiddle.net/ZfpQ6/4/
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
So far I can disable Today's date, but I'm coming up short trying to highlight the next 3 days
$( "#someDiv" ).datepicker({
beforeShowDay: function( date ){
//disable Sundays;
return [date.getDay() != 0, '']
},
/* today is disabled */
minDate: 1
});
... or is there a way to render individual day cells with date info as data attributes or something like that?
In your return, add a condition that will check for the date range you want and add a class to those dates.
Here is a jsFiddle with the full example. I'm sure this can be improved upon though.
The code and CSS to add a background to the dates when the condition is true (style it how you like):
.highlightDay .ui-state-default {
background: #484;
color: #FFF;
}
$(document).ready(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var newDate = addDays(new Date(), 0);
var thirdDay = addDays(new Date(), 3);
return [date.getDay() != 6,
// This can probably be improved
date >= newDate && date <= thirdDay ? "highlightDay" : ""];
},
minDate: 1
});
});
function addDays(theDate, days) {
return new Date(theDate.getTime() + days*24*60*60*1000);
}
I have a datepicker, and I want to use the picked date in a query in a Movements table, to retrieve corresponding turnover. But "currentDate" does not load with the picked date : I have a "invalid date" exception caught. How should I do it ?
$("#datepicker").change(function(){
var currentDate = $( "#datepicker" ).datepicker( "getDate" );
var wantedTO = <%=Movement.where(:movementDate =>Date.parse("currentDate")).sum("turnover")%>;
$(document).ajaxComplete(function(){ $("#result").html("<p>Result here : </p>" + wantedTO);
});
});
Note that if I replace
var wantedTO = <%=Movement.where(:movementDate =>Date.parse("currentDate")).sum("turnover")%>;
by
var wantedTO = <%=Movement.where(:movementDate =>Date.today).sum("turnover")%>;
it's giving me today's turnover. So I might not be so far !
EDIT :
To be sure of the date format, I added a line
var dateString = $.datepicker.formatDate("yy-mm-dd", currentDate);
And checked OK that if I put a manual date in that format then, it's working. It seems that it's a problem of how to pass this variable, but I can't fix it. Any idea ?
OK I have my answer. In case other newbies would face the same problem, I will summarize it. There was a big mistake in my code : you can't do a ruby query inside the Ajax code. So waht, you have to do :
1- Create a new method (sort) in your controller (movements_controller.rb) :
def sort
selected_date = params[:date]
new_html_to_return = Movement.where(:movementDate =>Date.parse(params[:date])).sum("turnover")
render :text => new_html_to_return
end
2- Create a POST ajax function in your view (index.html.erb) :
<script>
$(document).ready(function(){
var $datepicker = $("#datepicker"),
currentDate = new Date(),
dateString = "";
$datepicker.change(function(){
currentDate = $datepicker.datepicker( "getDate" );
dateString = $.datepicker.formatDate("yy-mm-dd", currentDate);
$.ajax({
type: "POST",
// You're sending the variable to your Ruby on Rails controller
url: "movements/sort/",
data: {"date":dateString},
}).done(function(data) {
$("#result").html("<p>Turnover: </p>" + data)
});
});
});
</script>
3- Create the associated route in your routes.rb :
post "movements/sort"
And you're done ! Enjoy !
$('.selector').datepicker({
onChangeMonthYear: function(year, month, inst) { ... }
});
How can I use the 'inst' parameter of onChangeMonthYear to auto-select the first day of the month?
see: http://jsfiddle.net/sD8rL/
I am currently using the code below but I feel like I should be able to use the 'inst' variable in a more straight-forward way.
$(".datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
maxDate:0,
onChangeMonthYear: function(year, month, inst){
// set date to 1st on year or month change
// this seems bit janky, but works
$('#' + inst.id).datepicker( "setDate", month + '/1/' + year );
// Can't I use the instatnce to set the date?
// $(inst).datepicker( "setDate", month + '/1/' + year ); // fails
// inst.datepicker( "setDate", month + '/1/' + year ); // fails
// inst.selectedDay = 1; // fails
// inst.currentDay = 1; // fails
}
});
If there is no particular reason that you want to use inst, you can always use this:
onChangeMonthYear: function(year, month, inst){
$(this).datepicker( "setDate", month + '/1/' + year );
}
See it in action: http://jsfiddle.net/william/sD8rL/2/.
Solution by William Niu doesn't consider other date formats (such as dd-mm-yyyy).
You'd better get a Date object from your datepicker and modify it the way you like (i.e., setting the first day of the month). After your modifications, you can re-pass the modified Date object to your datepicker.
dateFormat: "dd-mm-yy",
onChangeMonthYear: function(year, month, inst){
var selectedDate = $(this).datepicker( "getDate" );//Date object
selectedDate.setDate(1);//set first day of the month
selectedDate.setMonth(month-1);//month is 1-12, setMonth is 0-11
selectedDate.setFullYear(year);
$(this).datepicker( "setDate", selectedDate );
}
This way you won't overwrite date format (possibly set during datepicker initialization) ;)
Pay attention to the month format: datepicker handles a 1-12 format for months, while the Date object is 0-11.
Hope this can help, bye!
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 }