Request : modal mode

[badulesia]

Hello. Very nice plugin, well designed and interesting code. I have a request : can you add a modal mode, with the date window centered ? It could be triggered with an option.

$('#singleDateRange').DatePicker({ startDate: moment(), modal: true });

Thank you.

PS : tiny error in es6.js 19 ranges: [], //defualt rasnges is empty default ranges

[webislife]

Hi. thanks for feedback. i will add modal mode in weekend

[badulesia]

Le 17/06/2016 à 17:27, Denis a écrit :

Hi. thanks for feedback. i will add modal mode in weekend

Hmmm ... perfect :)

Another request would be "fixed arrows" for switching months and year. Hence the mouse is always above the clicking link, it's faster to use. example :

< May > < December >

december is longer than may, so arrows are not displayed at the same position. Use a CSS class with static width for displaying the month text.

Thank you.

[badulesia]

also add Ok, cancel buttons, and close on ESC :)

[webislife]

i added modal mode and close button for this mode. i think i do not need ok and cancel buttons when i click at date i make my choice and do not need one more click at button. Also fixed month min-width param and close on ESC

see demo and code. have fun

[badulesia]

Le 18/06/2016 à 01:09, Denis a écrit :

i added modal mode and close button for this mode. i think i dont need have ok and cancel buttons when i click at date i make my choice and do not need one more click at button. Also fixed month min-width param and close on ESC Very nice improvments, almost perfect. The modal mode is not complete : it also needs overlay. You just need to embed the whole thing into a div with a class. Have a look at this example : http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay

[webislife]

hi, i add overlay and somefixes. update demo page.

[badulesia]

Le 18/06/2016 à 23:40, Denis a écrit :

hi, i add overlay and somefixes. update demo page.

I've done some tests, it's improved. Meanwhile here some CSS suggestions :

in order to avoid z-index conflict, set .dt-modal_wrapper with a higher z-index, I set it to 1000. I don't know if it's better in .dt.show .dt-modal_wrapper or in .dt-modal_wrapper, result seems the same.

Most of months have 5 weeks, but some have 6, so the display change its height, and clickable arrows change position. It's more convinient to have fixed position arrows and let the display expands itself to the bottom. So i changed the translate in

.dt-modal .dt__wrapper { left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35); } [clever way to center the box by the way !]

to this .dt-modal .dt__wrapper { left: 50%; top: 50%; transform: translate(-50%, -260px); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35); } assuming that max-height is 520px, I set translation to -260px

position of arrows .dt__calendar_head_month > span { display: inline-block; min-width: 200px; } this will allow any month to be displayed correctly, and sets the arrows near the borders.

same thing for year, add this new rule .dt__calendar_head_year > span { display: inline-block; min-width: 200px; }

in es6.js, line 260, add a span html += '

'

• selectDate.format('Y') + '

';

I join you a screenshot of the final result. I have changed the arrows for awesome font icons : I like bigger arrows, just a matter of taste.

More tricky, you should add a foreach control in the plugin. example : $("#calendar1, #calendar2").DatePicker (); will set the date for the two calendars, while only the one clicked is expected.

And last thing, consider english as the default language within the plugin. line 252 weekShortDays = ['пн', 'вт', 'ср', 'чт', 'пт', 'cб', 'вс'];

Keep working, it's worthy :D

[webislife]

hi, thanks for your active feedback) i added, z-index, translate modal fix, fixed span min-widht 100px) and fixed bug ranges event. also remove param firstWeekDay and replace if to locale === 'ru' for fix russuian short week days. i like big metrial deisgn arrows too) i think i do not need add more files to depends for this plugin, customize plugin is very easy and other developers can customize css and js . About foreach control... when you need init to many selectors, use .each(). Default local set 'ru' ) i russian developer) don't forgot star) sorry for my bad english)

[badulesia]

Le 19/06/2016 à 18:11, Denis a écrit :

hi, thanks for your active feedback) i added, z-index, translate modal fix, fixed span min-widht 100px) and fixed bug ranges event. also remove param firstWeekDay and replace if to locale === 'ru' for fix russuian short week days. !! whaou, lot of changes. I'll see this tomorrow.

i like big metrial deisgn arrows too) i think i do not need add more files to depends for this plugin, customize plugin is very easy and other developers can customize css and js . That what I've done. Css and js or easy to customize.

About foreach control... when you need init to many selectors, use .each(). Default local set 'ru' ) i russian developer) I'm not UK or US, meanwhile I always developp in english, and set default values to english.

[badulesia]

Ok, I've checked all your changes, they are fine. I only need a few css/js customizations that are easy to do.

I still have a localization bug : I use a locale option different from english. Texts are dispayed in english when the plugin starts, whatever a locale option is set. Than texts are displayed in the correct language when a date is clicked. Some kind of refresh is missing, or maybe an incorrect use of moment script. Can you check this ?

There is no more firstDayOfWeek option ? I can see at line 247 that it is computed from moment, but it doesn't seem to work.

B. :)

[badulesia]

Le 19/06/2016 à 18:11, Denis a écrit :

hi, thanks for your active feedback)

Ok forget about the localization problem, it was just a bad use of moment.js in my own code. Sorry.

[webislife]

There is no more firstDayOfWeek option ?

see 250 line now i check locale param in before version i checked firstDayOfWeek param. i really don't know ( clean+fast+beautiful code way for fix bug for russian short name days week. one line fix is fast but don't clear(

[badulesia]

Le 20/06/2016 à 22:16, Denis a écrit :

There is no more firstDayOfWeek option ?
see 250 line now i check locale param in before version i checked
firstDayOfWeek param. i really don't know ( clean+fast+beautiful
code way for fix bug for russian short name days week.
one line fix is fast but don't clear(

I don't speak about translating the text, but shifting the days order and the whole calendar.

[webislife]

i test ru and en locale shifting is correct

[badulesia]

Le 20/06/2016 à 23:52, Denis a écrit :

i test ru and en locale shifting is correct

yes, but for other languages ? fr, es starts on monday.

[webislife]

fixed ) and hack for ru weekdays removed) have fun don't forgot star)

[badulesia]

Le 21/06/2016 à 22:27, Denis a écrit :

fixed ) and hack for ru weekdays removed) have fun don't forgot star)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/webislife/jQueryDatePicker/issues/1#issuecomment-227561398, or mute the thread https://github.com/notifications/unsubscribe/ADIhV5RuJIe7beJKlrXzBCzX6gHJpC9Yks5qOElNgaJpZM4I4bYo.

thank you, I'll test tomorrow

[badulesia]

Le 21/06/2016 à 22:27, Denis a écrit :

fixed ) and hack for ru weekdays removed) have fun

Everthing works perfect. I have tweaked some CSS to fit my site, and I'll use your plugin as datepicker. Thank you very much.