Jquery UI Datepicker with EOM and MOM - jquery-ui

I need implement a Jquery UI Calendar that when a users click any date, it select automatically to the next MOM or EOM.
For example, if the user clicks on April 9th, it must go to 'April 15th',
or if clicks on 22 February, it must go to 'Feb 28' or 'Feb 29'.
For clarification:
MOM is "Middle of Month, every time is 15th", from 1 to 15 of any month.
EOM is "End of Month, it's the last day of the month, jan 31, feb 28 or 29, mar 31, apr 30, may 31, jun 30, july 31, aug 31, sep 30, oct 31, nov 30, dec 31...
Thanks

I would do this as a standard jquery onchange handler for the text box. The reason is that a user can bypass the date-picker and type in a date manually. You want the date to automatically be changed no matter if the date is selected, typed in, or pasted in.

Use the onSelect event from datepicker. Be aware that if you have maxDate option set and its before EOM or MOM the value selected will be maxDate.
UPDATE: Close after select. Use onClose instead.
UPDATE2: jsFiddle using latest jQuery UI
onClose: function(dateText, inst) {
var day = inst.currentDay,
month = inst.currentMonth,
year = inst.currentYear;
if (day <= 15) {
day = 15;
}
else {
day = 0;
if (month>10){
month = 0;
year++;
}
else
month++;
}
var d = new Date(year, month, day);
$(this).datepicker("setDate", d);
}

The code that works with IE6/IE7/IE8/IE9 and FF, Chrome, etc.
<script type="text/javascript">
$(function() {
$("#payperiodcalendar input").datepicker({
dateFormat: 'dd-M-yy',
onSelect: function(dateText, inst) {
var selectedDay = inst.currentDay,
selectedMonth = inst.currentMonth,
selectedYear = inst.currentYear;
if (selectedDay <= 15) {
var now = new Date(selectedYear, selectedMonth, 15);
} else {
var now = new Date(selectedYear, selectedMonth, LastDayOfMonth(selectedYear, selectedMonth));
}
$(this).attr("value", now.format("dd-MMM-yyyy"));
}
});
function LastDayOfMonth(Year, Month) {
Month++;
return (new Date((new Date(Year, Month, 1)) - 1)).getDate();
}
});
</script>

Related

Future week disabled in Jquery UI Calender

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

jquery ui - disable today and highlight next 3 days

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);
}

Datepicker can't subtract properly on 2/28?

I don't think I'm hallucinating as I've tried it a dozen times. Here's my code:
$('#teo_prep_due').change(function() {
var ber = $('#ber_rcvd');
var tpd = $('#teo_prep_due');
var brDate = ber.datepicker('getDate');
var tpDate = tpd.datepicker('getDate');
var s1Date = new Date();
var s2Date = new Date();
var sdDate = new Date();
s1Date.setDate(brDate.getDate() + 5);
console.log(s1Date);
s2Date.setDate(tpDate.getDate() - 3);
console.log(s2Date);
if (s1Date < s2Date) {
sdDate.setDate(s1Date.getDate());
} else {
sdDate.setDate(s2Date.getDate());
}
$('#survey_due').datepicker('setDate', sdDate);
});
On my date form, I've entered February 28, 2013 for ber_rcvd and March 14, 2013 for teo_prep_due. Following the code, my result should be March 5, 2013. However, s2Date is resulting in February 11, 2013, as if a full month and 3 days are being subtracted instead of just 3 days. Has anyone else run into this?
Using: jquery-1.9.1.min.js, jquery-migrate-1.1.1.js and jquery-ui-1.10.1.min.js.
http://jsfiddle.net/devlshone/veP7b/
The problem is that .setDate() does not set the date, it sets the day of the month. It takes an integer as an argument. When you created s2Date it defaulted to today, which is in February. When you add tpDate.getDate()// equals 14 with -3, you get 11, and therefore February 11th.

Jquery UI Datepicker disabling wrong days

I have run in to issue that days that have to be disabled are shifted to the next day.
The idea is that day that does not exist in our booking object or have a value less than 1 should be disabled on calendar.
here is simplified version of my script and demonstration on jsfiddle:
var bookings = {
"2012-09-01": 24,
"2012-09-03": 31,
"2012-09-05": 27,
"2012-09-06": 9,
"2012-09-07": 18,
"2012-09-08": 0,
"2012-09-10": 20,
"2012-09-12": 19,
"2012-09-13": 0,
"2012-09-14": 9,
"2012-09-15": 24,
"2012-09-17": 19,
"2012-09-19": 28,
"2012-09-20": 15,
"2012-09-21": 12,
"2012-09-22": 25,
"2012-09-24": 19,
"2012-09-26": 0,
"2012-09-27": 0,
"2012-09-28": 0,
"2012-09-29": 0
};
function MyEvent(date)
{
bookings = bookings || {};
this.date = date.toISOString().substr(0, 10);
this.display = (typeof bookings[this.date] == 'number' && bookings[this.date] > 0);
return this;
}
MyEvent.prototype.toArray = function () {
return [this.display, null, null];
};
$(function ()
{
$('#eventCalendar').datepicker({
dateFormat: "yy-mm-dd",
firstDay: 1,
defaultDate: "2012-09-24",
beforeShowDay: function (date)
{
return new MyEvent(date).toArray();
}
}
);
});
Can some one suggest me what am I doing wrong or is it a bug?
It was a little struggle, but is not a bug.
There is a problem using:
date.toISOString()
the operation can return a different date (for example next day) from the original date passed from the plug in, because the function ignores timezone offsets
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/toISOString
so your condition will not work well.
Here is a working fiddle the is not using that function: http://jsfiddle.net/nBejK/2/

jQuery UI datepicker onChangeMonthYear and the inst parameter

$('.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!

Resources