Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

jquery datepickerのDOMツリー

More than 3 years have passed since last update.

jqeury ui datepickerをカスタマイズする際にDOMツリーがあると目的の要素にスタイルを当てやすいので共有

【div】 id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"
  【div】 class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"
        【a】 class="ui-datepicker-prev ui-corner-all" title="<上月"
             【span】 class="ui-icon ui-icon-circle-triangle-w"
        【a】 class="ui-datepicker-next ui-corner-all" title="下月>"
             【span】 class="ui-icon ui-icon-circle-triangle-e"
        【div】 class="ui-datepicker-title"
             【span】 class="ui-datepicker-year"
             【span】 class="ui-datepicker-month"
   【table】 class="ui-datepicker-calendar"
        【thead】
             【tr】
                  【th】
                  【th】
                  【th】
                  【th】
                  【th】
                  【th】class="ui-datepicker-week-end" //一番左が月曜から始まる場合(週始めによってこのクラスがどこにつくかは変わる
                  【th】class="ui-datepicker-week-end"
        【tbody】
             【tr】//trの数はその月の週数によって変わる
                  //tdは必ず7つある
                  【td】class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled" //前月の曜日なので表示なし(月によって変わる)
                  【td】class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"
                  【td】
                       【a】 class="ui-state-default" href="#"  //日付の数字が入る
                  【td】
                       【a】 class="ui-state-default" href="#"
                  【td】
                       【a】 class="ui-state-default" href="#"
                  【td】class=" ui-datepicker-week-end " //土日なので(どの曜日から始まるかによって位置は変わる
                       【a】 class="ui-state-default" href="#"
                  【td】class=" ui-datepicker-week-end "
                       【a】 class="ui-state-default" href="#"
             【tr】//以下上記同様
             【tr】
             【tr】
             【tr】
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away