jQuery时间输入

青旅半醒 2021-09-26 09:16 336阅读 0赞

# 导包：jQuery包，jquery-UI包，可以去官网下载 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
            
        <script src="js/jquery-ui-1.12.1/jquery-ui.js" type="text/javascript"></script>
    
        <link rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.css" type="text/css">
        <link rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.theme.css" type="text/css">
        
        <script src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script>
        <title>Title</title>
    </head>
    <body>
    <script type="text/javascript" > $(function () { $("#fromdata").datepicker({ //添加日期选择功能 numberOfMonths:2,//显示几个月 showButtonPanel:true,//是否显示按钮面板 showClearButton: true , changeMonth:false, defaultDate:+1, //showWeek: true, howOn:"button", //borth 既可以触发按钮 又可以触发文本框 弹出 日历 如果是button 只能触发button事件 buttonImageOnly: true, //设置这按钮只显示图片效果 不要有button的样式 showAnim:"toggle", //弹出日历的效果 buttonText: 'Choose', hideIfNoPrevNext: true, dateFormat: 'yy-mm-dd',//日期格式 clearText:"清除",//清除日期的按钮名称 closeText:"关闭",//关闭选择框的按钮名称 yearSuffix: '年', //年的后缀 showMonthAfterYear:true,//是否把月放在年的后面 defaultDate:'2016-11-11',//默认日期 minDate:'2016-03-20',//最小日期 maxDate:'2026-03-20',//最大日期 onSelect: function( selectedDate ) { $( "#fromdata" ).datepicker( "option", "defaultDate", new Date(selectedDate.replace(/-/g,',')) );//结束时间可选最小值为选中值 } }); }); </script>
        <input id="fromdata" readonly>
    </body>
    </html>

# 中文js:jquery.ui.datepicker-zh-CN.js #

/** * Created by qqg on 2017/12/6. */
    jQuery(function($){
        $.datepicker.regional['zh-CN'] = {
            clearText: '清除', clearStatus: '清除已选日期',
            closeText: '关闭',
            prevText: '<上月',
            nextText: '下月>',
            currentText: '今天',
            monthNames: ['一月','二月','三月','四月','五月','六月',
                '七月','八月','九月','十月','十一月','十二月'],
            monthNamesShort: ['一','二','三','四','五','六',
                '七','八','九','十','十一','十二'],
            dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
            dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
            dayNamesMin: ['日','一','二','三','四','五','六'],
            weekHeader: '周',
            dateFormat: 'yy-mm-dd',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: true,
            yearSuffix: '年'};
        $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
    });

# 截图 #

![这里写图片描述][SouthEast]

--------------------

[SouthEast]: /images/20210923/25ed4f104d8244699e42615940ff9b09.png