jtsage / jtsage-datebox

A multi-mode date and time picker for Bootstrap (3&4), jQueryMobile, Foundation, Bulma, FomanticUI, and UIKit (or others)
http://datebox.jtsage.dev/
Other
474 stars 166 forks source link

Additional option calUsePickersAndPrevNextMonth is needed. #346

Closed slavap closed 10 years ago

slavap commented 10 years ago

It could be useful to have an ability to hide header with calNoHeader="true", but still have Prev and Next month buttons available on the pickers band. See attachment. usepickers

UPDATE >> Workaround: Define it as calNoHeader="false" usePickers="true" Then it's possible to achieve needed functionality with the following CSS:

.ui-datebox-container .ui-datebox-gridheader .ui-datebox-gridlabel {
  display: none;
}
.ui-datebox-container .ui-datebox-gridheader + .ui-datebox-grid {
  clear: none;
  padding: 0 5px 0 5px !important;
}

Not sure if it's good solution, IMO additional option is a better way. usepickersandprevnextmonth

jtsage commented 10 years ago

So, I added a couple of options - first and foremost, I re-did the pickers bit so it's a control group.

now we have:

"calUsePickersIcons" - Show the +/- buttons on the same line as the pickers

It only works with calNoHeader and calUsePickers turned on - it pretty much just automates what you did - thanks, that made life way easier.

slavap commented 10 years ago

It's not quite working for me. I'm getting the following: usepickersicons

BUT expecting: usepickersicons_expected

It could be fixed by adding:

display: inline-block; width: 540px; /* 230px for standard calbox */

to control group's parent div, but the problem is that exact width must be specified depending on the current width of calbox :-( I don't know a good way how to make div cover all available space between float left and right elements.

Also ui-controlgroup padding should be fixed to:

padding: 0 10px 5px 10px !important;

At the moment I've ended up with the following CSS:

.ui-datebox-container .ui-datebox-gridheader + div {
    display: inline-block;
    width: 540px;
}
.ui-datebox-container .ui-datebox-gridheader + div > .ui-controlgroup {
    padding: 0 10px 5px 10px !important;
}

.ui-datebox-container { 
    width: 600px !important;
}
.ui-datebox-container .ui-datebox-griddate.ui-btn { 
    width: 82px;
    height: 57px;
    line-height: 19px;
}
.ui-datebox-container .ui-datebox-griddate.ui-datebox-griddate-label {
    width: 82px;
}

Which gives me the following look and feel: calboxformatted