#Question, #Request. Can we customize as per we want ?

[amarg26]

I am customizing this date-picker as per the requirement. Most of it I have achieved it. If you give me direction, It will be great.

(Expected )

In above Image is displaying horizontal dates and days (Mon-Sun) inside of each cell. Only current date to be visible from left to right under a fixed div with scrollable from left to right and vice versa.

(Current - Work In Progress)

I have achieved making it horizontal.

I want the following things to be done. I want confirmation whether it is possible or not and How can we make it?

1. Making it continuous dates. i.e. no empty cells of current month date by default towards left side.

2. (Mon-Sun) inside of each cell dynamically w.r.t each dates.

3. Date scrollable inside the parent div . as of now it is static.

[iangozer]

couple of things that might help:

If you post a https://jsfiddle.net/ then people can see what you have done and add to it easily.

1. showOtherMonths and selectOtherMonths options will help you with showing the dates at either side of the month. https://api.jqueryui.com/datepicker/#option-showOtherMonths.
2. This seems trickier but should be possible, maybe with ::after sudo elements.
3. If you where showing all of the date across the width of the div (this is probably going to be too wide) then the standard back next buttons would world. But because its probably too wide, then you will need to set the width wider than viewport crop as required and find some other script to handle scrolling the div.

[amarg26]

Hi @iangozer ,

On your kind request, Here I am sharing the Codepen link.

I tried in Codepen 1st solution but didn't worked.

I don't think the 2nd solution just as CSS will work. I want (Mon-Sun) words inside of each cell dynamically w.r.t each dates. As per first screenshot eg. ( 11->Mon ) within the each cell.

Please let mw know if its clear to you.

.

[iangozer]

@amarg26,

You are hiding them with td.ui-datepicker-other-month.ui-datepicker-unselectable.ui-state-disabled { display: none; }
Removing that shows them as I had meant, you would probably want to make them selectable too.

For the Days, you could use JS or CSS (would be way harder) to add the day labels to the nth children of the tr. showOtherMonths helps you with this as it makes sure the first and last week has 7 days.

[amarg26]

@iangozer

Yes, Removing css worked. Is it possible to display dates on today onwards ? i.e October month begins from todays date October 11? No past dates as per 1st screenshot?

May I have any demo for below? I did not understand it completely.

For the Days, you could use JS or CSS (would be way harder) to add the day labels to the nth children of the tr. showOtherMonths helps you with this as it makes sure the first and last week has 7 days.

and for this point also

If you where showing all of the date across the width of the div (this is probably going to be too wide) then the standard back next buttons would world. But because its probably too wide, then you will need to set the width wider than viewport crop as required and find some other script to handle scrolling the div.

[iangozer]

In short: what you have now is one month running horizontally, what you need is the whole calendar in one line running horizontally. So you can just keep scrolling.

To just remove past dates, you would probably have to us JS to add an extra class to past dates to hide them.

What you're trying to do is not just change the look of the calendar, you are going to need to change the html layout and the functions of the JS.

[amarg26]

@iangozer I working on removing disabled dated from the datepicker. $(".ui-datepicker-calendar").each(function () { if (!$(this).hasClass(".ui-datepicker-today")) { $(this).find(".ui-datepicker-unselectable").remove(); return false; } });

As per this code added by me. I am expecting to check if the td cells has no class ui-datepicker-today the remove disabled dates till today. It also deletes the disabled dates sat-sun also. What I need to add or remove in the code to display like expected screenshot?

Update: Also clicking to next month and prev month . It shows original dateicker.it resets the structure. What is the way to prevent the reset structure? You can refer same codpen link

[iangozer]

It is removing them all because you are removing them all $(this).find(".ui-datepicker-unselectable").remove(); any dates you disable with beforeShowDay, minDate or maxDate are unelectable.

The structure is reset because when your script is ran (page render) the next and previous dates do not exist. They are generated when you click the button. You could catch that same trigger and run your code again.

In honesty you either need to go deeper and edit how the jquery datepicker is rendered (similar to how this addon does) or start from scratch.
It looks like from your code that the max date is +30 days, it would be pretty easy to use JS to get the next 30 days as an array and output that array into a div with your own html structure.

https://stackoverflow.com/questions/6061626/find-next-30-days-javascript
Making them selectable is just storing the value in either a field or an array, highlighting with css etc