Date Picker do not have the right format

XMLWordPrintable

      Date pickers do not look as they should in Confluence 5.1.x. They seem to have lost all CSS information.

      Workaround:
      You can add the following CSS to your global stylesheet:

      .ui-datepicker{width:17em;padding:.2em .2em 0}
      .ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}
      .ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}
      .ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}
      .ui-datepicker .ui-datepicker-prev{left:2px}
      .ui-datepicker .ui-datepicker-next{right:2px}
      .ui-datepicker .ui-datepicker-prev-hover{left:1px}
      .ui-datepicker .ui-datepicker-next-hover{right:1px}
      .ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}
      .ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}
      .ui-datepicker .ui-datepicker-title select{float:left;font-size:1em;margin:1px 0}
      .ui-datepicker select.ui-datepicker-month-year{width:100%}
      .ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:49%}
      .ui-datepicker .ui-datepicker-title select.ui-datepicker-year{float:right}
      .ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}
      .ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}
      .ui-datepicker td{border:0;padding:1px}
      .ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}
      .ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}
      .ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}
      .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}
      .ui-datepicker.ui-datepicker-multi{width:auto}
      .ui-datepicker-multi .ui-datepicker-group{float:left}
      .ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}
      .ui-datepicker-multi-2 .ui-datepicker-group{width:50%}
      .ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}
      .ui-datepicker-multi-4 .ui-datepicker-group{width:25%}
      .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header{border-left-width:0}
      .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}
      .ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}
      .ui-datepicker-row-break{clear:both;width:100%}
      .ui-datepicker-rtl{direction:rtl}
      .ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}
      .ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}
      .ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}
      .ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}
      .ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}
      .ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}
      .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current{float:right}
      .ui-datepicker-rtl .ui-datepicker-group{float:right}
      .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header{border-right-width:0;border-left-width:1px}
      .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}
      .ui-datepicker-cover{display:none;display:block;position:absolute;z-index:-1;filter:mask();top:-4px;left:-4px;width:200px;height:200px}
      
      .ui-widget-overlay{position:absolute;top:0;left:0;width:100%;height:100%}
      .ui-widget{font-family:Verdana,Arial,sans-serif;font-size:1.1em}
      .ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Verdana,Arial,sans-serif;font-size:1em}
      .ui-widget-content{border:1px solid #aaa;background:#fff 50% 50% repeat-x;color:#222}
      .ui-widget-content a{color:#222}
      .ui-widget-header{border:1px solid #aaa;background:#ccc 50% 50% repeat-x;color:#222;font-weight:bold}
      .ui-widget-header a{color:#222}
      .ui-state-highlight,.ui-widget-content .ui-state-highlight{border:1px solid #fcefa1;background:#fbf9ee 50% 50% repeat-x;color:#363636}
      .ui-state-highlight a,.ui-widget-content .ui-state-highlight a{color:#363636}
      .ui-state-error,.ui-widget-content .ui-state-error{border:1px solid #cd0a0a;background:#fef1ec 50% 50% repeat-x;color:#cd0a0a}
      .ui-state-error a,.ui-widget-content .ui-state-error a{color:#cd0a0a}
      .ui-state-error-text,.ui-widget-content .ui-state-error-text{color:#cd0a0a}
      .ui-state-disabled,.ui-widget-content .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}
      .ui-priority-primary,.ui-widget-content .ui-priority-primary{font-weight:bold}
      .ui-priority-secondary,.ui-widget-content .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}
      .ui-widget-overlay{background:#aaa 50% 50% repeat-x;opacity:.30;filter:Alpha(Opacity=30)}
      .ui-widget-shadow{margin:-8px 0 0 -8px;padding:8px;background:#aaa 50% 50% repeat-x;opacity:.30;filter:Alpha(Opacity=30);-moz-border-radius:8px;-webkit-border-radius:8px}
      

      You should replace 5.1 by your 5.1.x version number.

        1. DatePicker_Conflence_5.0.3.png
          21 kB
          Alejandro Conde Carrillo
        2. DatePicker_Confluence_5.1.png
          21 kB
          Alejandro Conde Carrillo

            Assignee:
            Steve Haffenden (Inactive)
            Reporter:
            Alejandro Conde Carrillo (Inactive)
            Votes:
            3 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: