javascript - 如何在输入中获取选定的时间 - HTML 日历

Question

我正在制作一个项目，我应该根据 .PSD 文件制作日历。所以，语法已经制定，还有 html 和 css，但现在我需要在我的输入中获取该值。

我需要在输入中选择日期，但我不知道如何。我需要有这样的格式：dd/mm/yyyy。

#wrapper {
  margin: 0 auto;
  margin-top:50px;
  width:780px;  
}
#navigator {
  margin-top:0px;
  width: 461px;
  margin-bottom: -5px;
}
#arrowleftrsv {
  height: 24px;
  display: block;
  float: left;
  text-align: center;
  font-size: x-large;
  color: #ABABAB;
  text-decoration: none;
}
#arrowleftrsv:hover {
  display:block;
  text-align: center;
  font-size: x-large;
  color: #000000;
}
#arrowrightrsv {
  height: 24px;
  display: block;
  float: right;
  text-align: center;
  font-size: x-large;
  color: #ABABAB;
  text-decoration: none;
}
#arrowrightrsv:hover {
  display: block;
  text-align: center;
  font-size: x-large;
  color: #000000;
}

#monthname {
    margin: 0 auto;
    height: 90px;
    font-size: 32px;
    font-family: mybellgothic !important;
    font-size: 31px;
    color: #2e2e2e;
    background-color: rgb(253, 245, 222);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.left-arrow-img{
  left: 20px;
  position: relative;
  top: 10px
}
.right-arrow-img{
  right: 150px;
    position: relative;
    top: 10px;
}
.close-arrow-img{
    bottom: 20px;
    position: relative;
    left: 100px;
}

.close-arrow-img2{
      bottom: 23px;
    position: relative;
    left: 80px;
}

.circle-arrow-img{
      right: 30px;
    position: relative;
    top: 10px;
}
#calendar {
  height: 550px;
  width: 434px; 
}
#daynameblock {
  margin: 0 auto;
  margin-top:5px;
  width: 461px;
  height: 40px;
  background-color: #FFFFFF;
  font-family: mybellgothic;
  color: #2e2e2e;
  background-color: rgb(240, 240, 240);
  
}

.sept-month {
    left: 60px;
    position: relative;
    top: 25%;
}
.dayname{
  margin: 1px;
  height: 35px;
  width: 60px;
  display: block;
  float: left;
  font-family: mybellgothic !important;
  text-align: center;
  font-size: 23px;
  color: #2e2e2e;
}
.weekendname {
  margin: 1px;
  height: 35px;
  width: 60px;
  display: block;
  float: left;
  font-family: mybellgothic !important;
  text-align: center;
  font-size: 23px;
  color: #2e2e2e;
}
#daysblock {
    height: 393px;
    width: 461px;
    display: block;
    background-color: rgb(240, 240, 240);
    padding-left: 3px;
}
.weekdays a {
    height: 65px;
    width: 65px;
    display: block;
    float: left;
    font-family: mybellgothic;
    text-align: center;
    font-size: 23px;
    color: #2e2e2e;
    background-color: rgb(240, 240, 240);
    text-decoration: none;
    border: 1px solid #d4d4d4;
    font-weight: 400;
    padding: 12px;
}

.weekdays a:focus {
  background: #c33a29;
  outline: none;
}

.first-day{
  color: #bdbdbd !important;
}
.selected-day{
  background-color: #c33919 !important;
  color: white !important;
}
.second-day{
  background-color: #494949 !important;
  color: #676767 !important;
  }
.weekend a {
    height: 65px;
    width: 65px;
    display: block;
    float: left;
    font-family: mybellgothic;
    text-align: center;
    font-size: 23px;
    color: #2e2e2e;
    background-color: rgb(240, 240, 240);
    text-decoration: none;
    border: 1px solid #d4d4d4;
    font-weight: 400;
    padding: 12px;
}

.modal-content{
  background-color: transparent;
  border: none;
}

.modal-header{
  border-bottom: none;
}

.weekend a:focus {
  background: #c33a29;
  outline: none;
}

.weekdays a:hover {
  background: #c33a29;
  outline: 2px solid #FFFFFF;
    outline-offset: -4px;
}

.weekend a:hover {
  background: #c33a29;
  outline: 2px solid #FFFFFF;
  outline-offset: -4px;
}

<div id="wrapper">
    <div id="navigator">
      <div id="arrowleftrsv"><a href="#"><img class="left-arrow-img" src="images/left-arrow.png"></a></div>
      <div id="arrowrightrsv"><a href="#"><img class="right-arrow-img" src="images/right-arrow.png"></a></div>
      <div id="arrowrightrsv"><a href="#"><img class="circle-arrow-img" src="images/checked.png" data-dismiss="modal" aria-label="Close"></a></div>
      <div id="arrowrightrsv"><a href="#" data-dismiss="modal" aria-label="Close"><img class="close-arrow-img" src="images/close.png"></a></div>
      <div id="monthname"><p class="sept-month">Sept.&nbsp;&nbsp;2013</p></div>  
    </div>
    <div id="calendar">
    <div id="daynameblock">
      <div class="dayname">Mon</div>
      <div class="dayname">Tue</div>
      <div class="dayname">Wed</div>
      <div class="dayname">Thu</div>
      <div class="dayname">Fri</div>
      <div class="weekendname">Sat</div>
      <div class="weekendname">Sun</div>
    </div>
    <div id="daysblock">
      <div class="weekdays"><a class="first-day" tabindex="1">28</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">29</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">30</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">31</a></div>
      <div class="weekdays"><a href="#" tabindex="1">1</a></div>
      <div class="weekend"><a href="#" tabindex="1">2</a></div>
      <div class="weekend"><a href="#" tabindex="1">3</a></div>
      
      <div class="weekdays"><a href="#" tabindex="1">4</a></div>
      <div class="weekdays"><a href="#" tabindex="1">5</a></div>
      <div class="weekdays"><a href="#" tabindex="1">6</a></div>
      <div class="weekdays"><a class="selected-day" href="#" tabindex="1">7</a></div>
      <div class="weekdays"><a href="#" tabindex="1">8</a></div>
      <div class="weekend"><a href="#" tabindex="1">9</a></div>
      <div class="weekend"><a href="#" tabindex="1">10</a></div>
      
      <div class="weekdays"><a href="#" tabindex="1">11</a></div>
      <div class="weekdays"><a href="#" tabindex="1">12</a></div>
      <div class="weekdays"><a href="#" tabindex="1">13</a></div>
      <div class="weekdays"><a href="#" tabindex="1">14</a></div>
      <div class="weekdays"><a class="second-day" href="#" tabindex="1">15</a></div>
      <div class="weekend"><a href="#" tabindex="1">16</a></div>
      <div class="weekend"><a href="#" tabindex="1">17</a></div>
      
      <div class="weekdays"><a href="#" tabindex="1">18</a></div>
      <div class="weekdays"><a href="#" tabindex="1">19</a></div>
      <div class="weekdays"><a href="#" tabindex="1">20</a></div>
      <div class="weekdays"><a href="#" tabindex="1">21</a></div>
      <div class="weekdays"><a href="#" tabindex="1">22</a></div>
      <div class="weekend"><a href="#" tabindex="1">23</a></div>
      <div class="weekend"><a href="#" tabindex="1">24</a></div>
      
      <div class="weekdays"><a href="#" tabindex="1">25</a></div>
      <div class="weekdays"><a href="#" tabindex="1">26</a></div>
      <div class="weekdays"><a href="#" tabindex="1">27</a></div>
      <div class="weekdays"><a href="#" tabindex="1">28</a></div>
      <div class="weekdays"><a href="#" tabindex="1">29</a></div>
      <div class="weekdays"><a href="#" tabindex="1">30</a></div>
      <div class="weekend"><a class="first-day" tabindex="1">1</a></div>
      <div class="weekend"><a class="first-day" tabindex="1">2</a></div>

      <div class="weekdays"><a class="first-day" tabindex="1">3</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">4</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">5</a></div>
      <div class="weekdays"><a class="first-day"tabindex="1">6</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">7</a></div>
      <div class="weekend"><a class="first-day" tabindex="1">8</a></div>
      <div class="weekend"></div>
    </div>

所以，我需要在输入中选择选定的日期。

标签： javascripthtmlcss

Answer 1

您可以使用事件委托来获取单击单元格的内容，然后根据环境信息构造一个字符串。如何获得这一天如下所示。

const daysBlock = document.getElementById('daysblock');
const input = document.getElementById('input');
const days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];

daysBlock.onclick = (e) => {
  e.preventDefault();
  const day = e.target.closest('a').textContent;
  input.value = days[new Date(`2013,09,${day}`).getDay()] + ', ' + day;
};

#wrapper {
  margin: 0 auto;
  margin-top:50px;
  width:780px;  
}
#navigator {
  margin-top:0px;
  width: 461px;
  margin-bottom: -5px;
}
#arrowleftrsv {
  height: 24px;
  display: block;
  float: left;
  text-align: center;
  font-size: x-large;
  color: #ABABAB;
  text-decoration: none;
}
#arrowleftrsv:hover {
  display:block;
  text-align: center;
  font-size: x-large;
  color: #000000;
}
#arrowrightrsv {
  height: 24px;
  display: block;
  float: right;
  text-align: center;
  font-size: x-large;
  color: #ABABAB;
  text-decoration: none;
}
#arrowrightrsv:hover {
  display: block;
  text-align: center;
  font-size: x-large;
  color: #000000;
}

#monthname {
    margin: 0 auto;
    height: 90px;
    font-size: 32px;
    font-family: mybellgothic !important;
    font-size: 31px;
    color: #2e2e2e;
    background-color: rgb(253, 245, 222);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.left-arrow-img{
  left: 20px;
  position: relative;
  top: 10px
}
.right-arrow-img{
  right: 150px;
    position: relative;
    top: 10px;
}
.close-arrow-img{
    bottom: 20px;
    position: relative;
    left: 100px;
}

.close-arrow-img2{
      bottom: 23px;
    position: relative;
    left: 80px;
}

.circle-arrow-img{
      right: 30px;
    position: relative;
    top: 10px;
}
#calendar {
  height: 550px;
  width: 434px; 
}
#daynameblock {
  margin: 0 auto;
  margin-top:5px;
  width: 461px;
  height: 40px;
  background-color: #FFFFFF;
  font-family: mybellgothic;
  color: #2e2e2e;
  background-color: rgb(240, 240, 240);
  
}

.sept-month {
    left: 60px;
    position: relative;
    top: 25%;
}
.dayname{
  margin: 1px;
  height: 35px;
  width: 60px;
  display: block;
  float: left;
  font-family: mybellgothic !important;
  text-align: center;
  font-size: 23px;
  color: #2e2e2e;
}
.weekendname {
  margin: 1px;
  height: 35px;
  width: 60px;
  display: block;
  float: left;
  font-family: mybellgothic !important;
  text-align: center;
  font-size: 23px;
  color: #2e2e2e;
}
#daysblock {
    height: 393px;
    width: 461px;
    display: block;
    background-color: rgb(240, 240, 240);
    padding-left: 3px;
}
.weekdays a {
    height: 65px;
    width: 65px;
    display: block;
    float: left;
    font-family: mybellgothic;
    text-align: center;
    font-size: 23px;
    color: #2e2e2e;
    background-color: rgb(240, 240, 240);
    text-decoration: none;
    border: 1px solid #d4d4d4;
    font-weight: 400;
    padding: 12px;
}

.weekdays a:focus {
  background: #c33a29;
  outline: none;
}

.first-day{
  color: #bdbdbd !important;
}
.selected-day{
  background-color: #c33919 !important;
  color: white !important;
}
.second-day{
  background-color: #494949 !important;
  color: #676767 !important;
  }
.weekend a {
    height: 65px;
    width: 65px;
    display: block;
    float: left;
    font-family: mybellgothic;
    text-align: center;
    font-size: 23px;
    color: #2e2e2e;
    background-color: rgb(240, 240, 240);
    text-decoration: none;
    border: 1px solid #d4d4d4;
    font-weight: 400;
    padding: 12px;
}

.modal-content{
  background-color: transparent;
  border: none;
}

.modal-header{
  border-bottom: none;
}

.weekend a:focus {
  background: #c33a29;
  outline: none;
}

.weekdays a:hover {
  background: #c33a29;
  outline: 2px solid #FFFFFF;
    outline-offset: -4px;
}

.weekend a:hover {
  background: #c33a29;
  outline: 2px solid #FFFFFF;
  outline-offset: -4px;
}

<input id="input">
<div id="wrapper">
    <div id="navigator">
      <div id="arrowleftrsv"><a href="#"><img class="left-arrow-img" src="images/left-arrow.png"></a></div>
      <div id="arrowrightrsv"><a href="#"><img class="right-arrow-img" src="images/right-arrow.png"></a></div>
      <div id="arrowrightrsv"><a href="#"><img class="circle-arrow-img" src="images/checked.png" data-dismiss="modal" aria-label="Close"></a></div>
      <div id="arrowrightrsv"><a href="#" data-dismiss="modal" aria-label="Close"><img class="close-arrow-img" src="images/close.png"></a></div>
      <div id="monthname"><p class="sept-month">Sept.&nbsp;&nbsp;2013</p></div>  
    </div>
    <div id="calendar">
    <div id="daynameblock">
      <div class="dayname">Mon</div>
      <div class="dayname">Tue</div>
      <div class="dayname">Wed</div>
      <div class="dayname">Thu</div>
      <div class="dayname">Fri</div>
      <div class="weekendname">Sat</div>
      <div class="weekendname">Sun</div>
    </div>
    <div id="daysblock">
      <div class="weekdays"><a class="first-day" tabindex="1">28</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">29</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">30</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">31</a></div>
      <div class="weekdays"><a href="#" tabindex="1">1</a></div>
      <div class="weekend"><a href="#" tabindex="1">2</a></div>
      <div class="weekend"><a href="#" tabindex="1">3</a></div>
      
      <div class="weekdays"><a href="#" tabindex="1">4</a></div>
      <div class="weekdays"><a href="#" tabindex="1">5</a></div>
      <div class="weekdays"><a href="#" tabindex="1">6</a></div>
      <div class="weekdays"><a class="selected-day" href="#" tabindex="1">7</a></div>
      <div class="weekdays"><a href="#" tabindex="1">8</a></div>
      <div class="weekend"><a href="#" tabindex="1">9</a></div>
      <div class="weekend"><a href="#" tabindex="1">10</a></div>
      
      <div class="weekdays"><a href="#" tabindex="1">11</a></div>
      <div class="weekdays"><a href="#" tabindex="1">12</a></div>
      <div class="weekdays"><a href="#" tabindex="1">13</a></div>
      <div class="weekdays"><a href="#" tabindex="1">14</a></div>
      <div class="weekdays"><a class="second-day" href="#" tabindex="1">15</a></div>
      <div class="weekend"><a href="#" tabindex="1">16</a></div>
      <div class="weekend"><a href="#" tabindex="1">17</a></div>
      
      <div class="weekdays"><a href="#" tabindex="1">18</a></div>
      <div class="weekdays"><a href="#" tabindex="1">19</a></div>
      <div class="weekdays"><a href="#" tabindex="1">20</a></div>
      <div class="weekdays"><a href="#" tabindex="1">21</a></div>
      <div class="weekdays"><a href="#" tabindex="1">22</a></div>
      <div class="weekend"><a href="#" tabindex="1">23</a></div>
      <div class="weekend"><a href="#" tabindex="1">24</a></div>
      
      <div class="weekdays"><a href="#" tabindex="1">25</a></div>
      <div class="weekdays"><a href="#" tabindex="1">26</a></div>
      <div class="weekdays"><a href="#" tabindex="1">27</a></div>
      <div class="weekdays"><a href="#" tabindex="1">28</a></div>
      <div class="weekdays"><a href="#" tabindex="1">29</a></div>
      <div class="weekdays"><a href="#" tabindex="1">30</a></div>
      <div class="weekend"><a class="first-day" tabindex="1">1</a></div>
      <div class="weekend"><a class="first-day" tabindex="1">2</a></div>

      <div class="weekdays"><a class="first-day" tabindex="1">3</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">4</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">5</a></div>
      <div class="weekdays"><a class="first-day"tabindex="1">6</a></div>
      <div class="weekdays"><a class="first-day" tabindex="1">7</a></div>
      <div class="weekend"><a class="first-day" tabindex="1">8</a></div>
      <div class="weekend"></div>
    </div>