日历时间插件

下面介绍两款插件：

1、Bootstrap的组件：datetimepicker

以下两个步骤就可以实现日历插件的使用：

    <tr>
        <td align="right">开始时间：</td>
        <td>
            <input class="form-control" style="150px;" type="text" id="starttime" name="starttime"  autocomplete="off" value="">
        </td>
    </tr>

    <tr>
        <td align="right">结束时间：</td>
        <td>
            <input class="form-control" style="150px;" type="text" id="endtime" name="endtime" autocomplete="off" value="">
        </td>
    </tr>

<link rel="stylesheet" type="text/css" href="/Public/js/jquery.datetimepicker/jquery.datetimepicker.min.css"/>
<script src="/Public/js/jquery.datetimepicker/jquery.datetimepicker.full.min.js"></script>
<script language="javascript">
    // 初始化日期时间控件
    function initDatetimepicker(jqid) {
        if (jqid == '') {
            return;
        }

        var option = {
            lang: "ch",
            format: "Y-m-d H:i",
            timepicker: true,
            todayButton: false,
            defaultSelect:false,
//            minDate: 0,
            scrollMonth : false,
            step: 10,
            onChangeDateTime: function (dp, $input) {
                $(this).trigger('blur');// 触发html5-placeholder-shim
            }
        };

        var source = $('#menu').val();
        if( source != 'orderadditional' ) {
            option['minDate'] = 0;
        }
        $('#' + jqid).datetimepicker(option);
    }

    // 设置中文简体
    $.datetimepicker.setLocale('ch');
    // 用车时间起
    initDatetimepicker('starttime');
    // 用车时间止步
    initDatetimepicker('endtime');
</script>

 插件下载：http://pan.baidu.com/s/1pKLvg87

2、mobiscroll插件  （兼容PC端和移动端）

官网文档：https://mobiscroll.com 

              https://demo.mobiscroll.com/

             

3、WdatePicker

      http://blog.csdn.net/wanglei19880622/article/details/8051322