jQuery datepicker hide dates in between two months - jquery-ui

Is there any way to hide the dates in between the two months when the option of numberOfMonths: 2.
I meant the first month's previous days and second month's next days to be enable and the days in between the two months will be hide.
Expected output will be looks like below:
The red colored part to be hide
Update: Those [Feb 23-28 and May 1-10] need to be grayed out only.
I want to hide the [Apr 1-5] in the March and [Mar 30-31] in the April.
Sample JsFiddle

This one was giving me a hard time but I think you can do it with some CSS:
div.ui-datepicker-group-first td:not(.ui-datepicker-other-month) ~ td.ui-datepicker-other-month {
visibility:hidden;
}
div.ui-datepicker-group-last td {
visibility:hidden;
}
div.ui-datepicker-group-last td.ui-datepicker-other-month ~ td:not(.ui-datepicker-other-month), div.ui-datepicker-group-last td:not(.ui-datepicker-other-month), div.ui-datepicker-group-last td:not(.ui-datepicker-other-month) ~ td.ui-datepicker-other-month {
visibility:visible;
}
jsFiddle example

Related

Match date in two cells with conditional formatting, +/- 3 days.. Google sheets

I am making a deadline sheet for office.
I have made a conditional format that compares the dates with our "office are closed"-dates provided by our HR-department. If the delivery date match any of the "office closed"-dates in the next column it will be coloured red.
This works fine, but I just noticed one thing. If the date where 1 day before the holidays, and the holidays would be many days a row starting next day, we wouldn't see that and we would probably get big trouble manage Finnish these masters before deadline as we are not at office for a few days.
So, I thought, maybe I could add to the script something that says: "compare the dates in this column with the dates in "Office Closed"-column, if there is a match within a range of 5 days, color it red...?
Is this something I can do?
here is a screenshot of the sheet.
This is the code I use in Conditional Formatting now:
=COUNTIF($L$4:$L$25,H6)>0 which works fine.
Thanks for any help!
/Andreas
Use following formula in CF:
=IF(LEN(A2),SUMPRODUCT((($C$2:$C+3)>=A2)*(($C$2:$C-3)<=A2)))

Get Normal Week number from Jquery UI datepicker

I am trying to get week number(1,2,3,4,5) with in the month from Jquery UI datepicker. I googled and get the code of iso8601Week but not normal week number.
Kindly Help
This should give you close to what you want, although I've only smoke tested it and there are probably some more edge conditions that need to be addressed.
I basically took the iso8601Week of the first day of the month, and subtracted it from that of the selected date. That works as is for most dates, but ISO 8601 puts days before Jan 4th in the previous year if they fall before Thursday. That's the reason for the % 52.
The code assumes an input called testDate and a label called label1:
$('#testDate').datepicker({
onSelect: function(dateText, inst) {
var d = new Date(dateText);
var d1 = new Date(d.getFullYear(), d.getMonth(), 1)
var x = $.datepicker.iso8601Week(d) % 52;
var y = $.datepicker.iso8601Week(d1) % 52;
$('#label1').text(x-y+1);
}
});
I left in all the variables with partial results in them so you could tinker around with the values. This code assumes that the week begins on Monday (which is the ISO 8601 standard), and that partial weeks before Monday are week 1. So, if the month begins on a Monday, the first Monday is in week 1, and if the month begins on any other day, the first Monday is in week 2. Which looks a bit strange if the 2nd of the month is on Monday and also in week 2, but if you don't like that, you'll have to spend some time deciding in detail what you do like.

IOS 7+ Custom DateTimePicker Time Range

I wonder if there is a way to custom a datepicker's time range?
How can I remove minute column and leave only 9 and 5 in hour column? is that possible?
Maybe you should considere to use this cocoapod:
https://www.cocoacontrols.com/controls/dvdatepickertableviewcell
or this webpage:
http://blog.deeplink.me/post/81386967477/how-to-easily-customize-uidatepicker-for-ios
and try to custom it as you want.
For UIDatepicker it is not possible to remove the minutes column or only to show 9 and 5 hour in hour column.
UIDatePickerModeDateAndTime:
The date picker displays dates (as unified day of the week, month, and day of the month values) plus hours, minutes, and (optionally) an AM/PM designation. The exact order and format of these items depends on the locale set. An example of this mode is [ Wed Nov 15 | 6 | 53 | PM ].
You need to use custom datepicker for that,you may consider to look at this link for custom picker https://github.com/mwermuth/MWDatePicker
for MWDatePicker first date were invisible but changing the font color like this [datePicker setFontColor:[UIColor blueColor]]; in viewdidLoad in MWViewController.m make them visible.And then modifying the method fillWithCalendar in MWDatePicker.m like this
- (void)fillWithCalendar{
minutes = #[#""];
hours = #[#"05",#"09"];
////others coding
}
i think would give you desired output.

Can I make the jQuery datepicker display more year when using the changeYear option?

I am using the jQuery datepicker in an application which will be used, among other things, to insert and update birth dates of employees. I find it cumbersome to have to click several times in order to get to the 70's and 80', decades in which many employees are born in. Is there a way to access these 'further' years in less clicks?
This is what my datepicker looks like
$("#DateOpened").datepicker({
dateFormat: "mm/dd/yy",
maxDate: "+0D",
showAnim: 'slide',
changeMonth: true,
changeYear: true,
'setDate': new Date(),
onClose: function (selectedDate) {
$("#DateClosed").datepicker("option", "minDate", selectedDate);
}
});
Use the yearRange option to increase the size of the year drop-down.
yearRange: "c-30:+0"
will allow selecting a year after 1983 in one click, and the 70's in 2 clicks.
FIDDLE
However, this isn't a good UI. When the user first clicks on the menu, it's not obvious that they can go back more than 30 years by first selecting an old year and then clicking on the menu again. You can use c-100:+0 to allow the menu to contain 100 years, hopefully this wil be enough for most users.
If I understood correctly, then yes it is possible using minDate and maxDate options. Here you can set the year that has to be shown.
changeYear: true,
minDate: '-1Y', //decrease 1 year from current year
maxDate: '+2Y' //increase 2 from current year
Y represent year.
This is one shortest way to reach the year soon.

annotated time line

I'm working with google annotated time line graphs: http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html
My question is: I would like to limit the X-axis to show just a range of hours between 5:00 and 21:00. Today I'm showing already per hour but I would like to limit the range and not show 24 hours. Is it possible?
Can't you just set the zoomStartTime and zoomEndTime to configure the part of the x axis that is shown?
Something like the following might do it, ie set the start and end date/times and also turn off the range and zoom functions.
annotatedtimeline.draw(data, {
'displayRangeSelector' : false,
'displayZoomButtons': false,
'zoomStartTime': new Date(2009, 1 ,2),
'zoomEndTime': new Date(2009, 1 ,5)});
Just a thought after looking here.

Resources