日历控件

<link rel="stylesheet" media="all" type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css" />

<style type="text/css"> 
.example-container{ background-color: #f4f4f4; border-bottom: solid 2px #777777; margin: 0 0 40px 0; padding: 20px; }
.example-container p{ font-weight: bold; }
.example-container > dl dt{ font-weight: bold; height: 20px; }
.example-container > dl dd{ margin: -20px 0 10px 100px; border-bottom: solid 1px #fff; }
.example-container input{ width: 150px; }
.clear{ clear: both; }
#ui-datepicker-div, .ui-datepicker{ font-size: 80%; }

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style> 

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>

<input type="text" name="example1" id="example1" value="" />
<script>
jQuery(function($){ 
    $.datepicker.regional['zh-CN'] = { 
    clearText: '清除', 
    clearStatus: '清除已选日期', 
    closeText: '关闭', 
    closeStatus: '不改变当前选择', 
    prevText: '<上月', 
    prevStatus: '显示上月', 
    prevBigText: '<<', 
    prevBigStatus: '显示上一年', 
    nextText: '下月>', 
    nextStatus: '显示下月', 
    nextBigText: '>>', 
    nextBigStatus: '显示下一年', 
    currentText: '今天', 
    currentStatus: '显示本月', 
    monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], 
    monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'], 
    monthStatus: '选择月份', 
    yearStatus: '选择年份', 
    weekHeader: '周', 
    weekStatus: '年内周次', 
    dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
    dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
    dayNamesMin: ['日','一','二','三','四','五','六'], 
    dayStatus: '设置 DD 为一周起始', 
    dateStatus: '选择 m月 d日, DD', 
    dateFormat: 'yy-mm-dd', 
    firstDay: 1, 
    initStatus: '请选择日期',
        isRTL: false}; 
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']); 
});
$('#example1').datetimepicker();
</script>

 

示例图：