Reply To: How to do this !

[isra26]

this is not a full solution but it might give you an idea. Plus you’ll need to implement perhaps a jquery plugin to use the slider function or write your own.

<div class="main">
  <div class="date">
    Wednesday <br />
    <small>4th December</small>
  </div>
  <ul class="time">
    <li>6am</li>
    <li>7am</li>
    <li>8am</li>
    <li>9am</li>
    <li>10am</li>
  </ul>
  <div class"calendar">
    <textarea name="" id="" cols="30" rows="4"></textarea>
    <button class="changeDate">Change Date</button>
  </div>
</div>  

and the css:

.main
{
  background: green;
  color: white;
  min-height: 50px;
  padding: 20px;
}

.date
{
  margin: 10px 30px 10px 10px;
  float: left;
}

.time
{
  float: left;
  margin-right: 40px;
}

.time li
{
  display: inline-block;
  margin-left: 20px;
}

.changeDate
{
  background: rgba(0,0,0,0.7);
  border: none;
  width: 150px;
  height: 60px;
  float: rigth;
  position: relative;
  top: -25px;
  color: white;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
}