Cacher is the code snippet organizer for pro developers

<tr>
    <td colspan="7">
        <label for="hour">時：</label>
        <input type="number" id="hourText" min="0" max="23" value="0"/>
        <input type="range" id="hourRange" min="0" max="23" value="0"/>
    </td> 
</tr>

/*class selected的CSS內容*/
background-color: rgba(53, 53, 53, 0.4);
box-shadow: inset 0px 0px 3px rgba(35, 35, 35, 0.5);

$('#calendar tbody').on({click: function()
{  
    $('#calendar tbody td.selected').removeClass('selected');
   
    choose.date = parseFloat($(this).text());
    $(this).addClass('selected');
    showList();
}}, "td");

function drawCalendar(dateJSON)
{
    $('#year').html(dateJSON.year + "年 " + dateJSON.month + "月");
  
    var dateList = "<tr>";
    var dateEnd = new Date(dateJSON.year, dateJSON.month, 0).getDate(); //Get the end of the choosed month(28, 29, 30 or 31)
    var dayStart = new Date(dateJSON.year, (dateJSON.month - 1), 1).getDay(); //Get choosed month's first day
  
    if(dayStart > 0)
        dateList += "<td id=\"ignoreData\" colspan=" + dayStart + "></td>";
  
    var dateCount = 1;
    var SaturdayDate = 7 - dayStart;
    while(dateCount <= dateEnd)
    {
        dateList += "<td>" + (dateCount++) + "</td>";
 
        if(dateCount > SaturdayDate) //new week
        {                            //Final week
            SaturdayDate = ((dateCount + 6) > dateEnd) ? dateEnd : (dateCount + 6);
            dateList += "</tr><tr>";
        }     
    }       
     
    dateList += "</tr>";    
    $('#calendar tbody').html(dateList)
                        .find('td')
                        .filter(function() {return (parseFloat($(this).text()) == dateJSON.date);}) 
                        .addClass('selected');
    showList(); 
}   

/*左邊三角形(省略部份語法)*/
#lastMonth
{
    border-radius: 8px;
    border-style: solid;
    border-width: 15px 25px 15px 0;
    border-color: transparent rgba(53, 53, 53, 0.2) transparent transparent;
}
#lastMonth:active {border-color: transparent rgba(53, 53, 53, 0.5) transparent transparent;}

//jQuery Event

$('#lastMonth').click(function(){changeMonth(-1)});
$('#year').click(     function(){changeMonth(0)}); //back to current year
$('#nextMonth').click(function(){changeMonth(1)});
 
function changeMonth(changeRange)
{
    choose.month = (changeRange == 0) ? current.month : (choose.month += changeRange);
  
    var lastOrNextYear = (choose.month > 12) - (choose.month < 1); //Jump to Last Year(= -1) or Next Year(= 1) or not(= 0)
    choose.year += lastOrNextYear;
    choose.month -= 12 * lastOrNextYear; //Last Year(0 + 12), Next Year(13 - 12)
  
    var currentYearAndMonth = (choose.year == current.year && choose.month == current.month)
    choose.date = currentYearAndMonth ? current.date : 1;
  
    drawCalendar(choose);
}

<thead>
    <tr>
        <th id="lastMonth"></th>
        <th colspan="5" id="year"></th>
        <th id="nextMonth"></th>
    </tr>
    <tr id="week">
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
    </tr>
</thead>

function showList()
    {$('#calendar caption').html($('#year').text() + choose.date + "日 " + prependZero(choose.hour) + ":" + prependZero(choose.minute));}
 
function prependZero(vari) {return (vari < 10) ? ("0" + vari) : vari;}

//setTimeNumber 與 setTimeRange function
$('#hourText').change( function() {setTimeRange (this, $(this).val());});
$('#hourRange').change(function() {setTimeNumber(this, $(this).val());});
 
function setTimeNumber(id, value) 
{
    $(id).prev().val(value);
    setTime();
    showList();
}
 
function setTimeRange(id, value)
{
    var NotANumber = isNaN(parseFloat(value));
    var higherThanMaxValue = (value > parseFloat($(id).attr("max")));
    var lowerThanMinValue =  (value < parseFloat($(id).attr("min")));
    if(NotANumber || higherThanMaxValue || lowerThanMinValue)
    {
        $(id).val($(id).next().val());
        return;
    }
  
    $(id).next().val(value);
    setTime();
    showList();
}
 
function setTime()
{
    choose.hour = $('#hourRange').val();
    choose.minute = $('#minuteRange').val();
}

var current = 
{
    'year':  new Date().getFullYear(),
    'month': new Date().getMonth() + 1,
    'date':  new Date().getDate()
};
 
var choose = 
{
    'year':  current.year,
    'month': current.month,
    'date':  current.date,
    'hour':  0,
    'minute':0
};