Slightly Better Looking DatePicker

This commit is contained in:
raghunayyar 2014-05-20 15:38:06 +05:30 committed by Georg Ehrke
parent f5c16872cf
commit 5b2bc6ed20
2 changed files with 88 additions and 14 deletions

View File

@ -3869,20 +3869,20 @@ angular.module("template/datepicker/day.html", []).run(["$templateCache", functi
"<table role=\"grid\" aria-labelledby=\"{{uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" +
" <thead>\n" +
" <tr>\n" +
" <th colspan=\"{{5 + showWeeks}}\"><button id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n" +
" <th><button type=\"button\" class=\"button\" id=\"datecontrol_left\" ng-click=\"move(-1)\" tabindex=\"-1\">&nbsp;<&nbsp;</button></th>\n" +
" <th><button type=\"button\" id=\"datecontrol_right\" ng-click=\"move(1)\" tabindex=\"-1\">&nbsp;>&nbsp;</button></th>\n" +
" <th colspan=\"{{5 + showWeeks}}\"><div id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"datepicker_current\" ng-click=\"toggleMode()\" tabindex=\"-1\">{{title}}</div></th>\n" +
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_left\" ng-click=\"move(-1)\" tabindex=\"-1\">&nbsp;<&nbsp;</button></th>\n" +
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_right\" ng-click=\"move(1)\" tabindex=\"-1\">&nbsp;>&nbsp;</button></th>\n" +
" </tr>\n" +
" <tr>\n" +
" <th ng-show=\"showWeeks\" class=\"text-center\"></th>\n" +
" <th ng-repeat=\"label in labels track by $index\" class=\"text-center\"><small aria-label=\"{{label.full}}\">{{label.abbr}}</small></th>\n" +
" <th ng-show=\"showWeeks\"></th>\n" +
" <th ng-repeat=\"label in labels track by $index\" class=\"days\"><span class=\"day\" aria-label=\"{{label.full}}\">{{label.abbr}}</span></th>\n" +
" </tr>\n" +
" </thead>\n" +
" <tbody>\n" +
" <tr ng-repeat=\"row in rows track by $index\">\n" +
" <td ng-show=\"showWeeks\" class=\"text-center h6\"><em>{{ weekNumbers[$index] }}</em></td>\n" +
" <td ng-repeat=\"dt in row track by dt.date\" class=\"text-center\" role=\"gridcell\" id=\"{{dt.uid}}\" aria-disabled=\"{{!!dt.disabled}}\">\n" +
" <button type=\"button\" style=\"width:100%;\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" tabindex=\"-1\"><span ng-class=\"{'text-muted': dt.secondary, 'text-info': dt.current}\">{{dt.label}}</span></button>\n" +
" <td ng-repeat=\"dt in row track by dt.date\" class=\"dates\" role=\"gridcell\" id=\"{{dt.uid}}\" aria-disabled=\"{{!!dt.disabled}}\">\n" +
" <a class=\"date\" ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\" tabindex=\"-1\"><span ng-class=\"{'text-muted': dt.secondary, 'text-info': dt.current}\">{{dt.label}}</span></a>\n" +
" </td>\n" +
" </tr>\n" +
" </tbody>\n" +
@ -3895,9 +3895,9 @@ angular.module("template/datepicker/month.html", []).run(["$templateCache", func
"<table role=\"grid\" aria-labelledby=\"{{uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" +
" <thead>\n" +
" <tr>\n" +
" <th><button id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n" +
" <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left\" ng-click=\"move(-1)\" tabindex=\"-1\">&nbsp;<&nbsp;</button></th>\n" +
" <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right\" ng-click=\"move(1)\" tabindex=\"-1\">&nbsp;>&nbsp;</button></th>\n" +
" <th><div id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"datepicker_current\" ng-click=\"toggleMode()\" tabindex=\"-1\">{{title}}</div></th>\n" +
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_left\" ng-click=\"move(-1)\" tabindex=\"-1\">&nbsp;<&nbsp;</button></th>\n" +
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_right\" ng-click=\"move(1)\" tabindex=\"-1\">&nbsp;>&nbsp;</button></th>\n" +
" </tr>\n" +
" </thead>\n" +
" <tbody>\n" +
@ -3931,9 +3931,9 @@ angular.module("template/datepicker/year.html", []).run(["$templateCache", funct
"<table role=\"grid\" aria-labelledby=\"{{uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" +
" <thead>\n" +
" <tr>\n" +
" <th colspan=\"3\"><button id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm\" ng-click=\"toggleMode()\" tabindex=\"-1\" style=\"width:100%;\"><strong>{{title}}</strong></button></th>\n" +
" <th><button type=\"button\" class=\"\" ng-click=\"move(-1)\" tabindex=\"-1\">&nbsp;<&nbsp;</button></th>\n" +
" <th><button type=\"button\" class=\"\" ng-click=\"move(1)\" tabindex=\"-1\">&nbsp;>&nbsp;</button></th>\n" +
" <th colspan=\"3\"><div id=\"{{uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"datepicker_current\" ng-click=\"toggleMode()\" tabindex=\"-1\">{{title}}</div></th>\n" +
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_left\" ng-click=\"move(-1)\" tabindex=\"-1\">&nbsp;<&nbsp;</button></th>\n" +
" <th><button type=\"button\" class=\"datepicker_toggle datepicker_right\" ng-click=\"move(1)\" tabindex=\"-1\">&nbsp;>&nbsp;</button></th>\n" +
" </tr>\n" +
" </thead>\n" +
" <tbody>\n" +

View File

@ -19,4 +19,78 @@
* You should have received a copy of the GNU Affero General Public
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
*/
*/
#datepicker .datepicker_current {
float: left;
width: 220px;
height: 26px;
margin-top: 6px;
margin-left: 6px;
padding-top: 6px;
background-color: white;
border: 1px solid rgba(190, 190, 190, 0.9);
border-radius: 3px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
color: rgb(85, 85, 85);
font-weight: bold;
text-align: center;
overflow: hidden;
cursor:pointer;
}
#datepicker .datepicker_toggle {
height: 34px;
margin-top: 6px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-weight: normal;
}
#datepicker .datepicker_left {
width: 33px;
border-radius: 0;
border-left: 0;
}
#datepicker .datepicker_right {
width: 33px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
}
#datepicker .days {
color: rgb(85, 85, 85);
text-align: center;
font-weight: bold;
padding: .7em .3em;
border: 0;
width:30px;
}
#datepicker .dates {
padding:1px;
}
#datepicker .date {
border: 1px solid #ddd;
font-weight: bold;
color: #555;
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding: .2em;
text-decoration: none;
text-align: center;
max-width: 33px;
}
#datepicker .date.active {
border: 1px solid #1d2d44;
background: #f8f8f8;
font-weight: bold;
color: #1d2d44;
}