jqueryUI日期控件和时间控件

最新推荐文章于 2024-07-21 02:56:03 发布

lianflower

最新推荐文章于 2024-07-21 02:56:03 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/lianflower/article/details/112677323

版权

JavaScript 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

日期控件用法：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>日期</title>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
</head>
<body>
<input type="text" id="datepicker" style="width: 150px;height: 30px;text-align: center;">
<script>
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        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,
        onSelect: function (selectedDate) {
            console.log(selectedDate);
        }
    });
</script>
</body>

效果展示：
在这里插入图片描述

日期控件和时间控件一起使用：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>日期和时间</title>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery-ui-timepicker-addon.min.js"></script>
    <style>

        /*以下日期控件和时间控件一起使用时，需要用到的css样式*/
        .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
        .ui-timepicker-div dl { text-align: left; }
        .ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
        .ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
        .ui-timepicker-div td { font-size: 90%; }
        .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
        .ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }

        .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
        .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }

        .ui-timepicker-rtl{ direction: rtl; }
        .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
        .ui-timepicker-rtl dl dt{ float: right; clear: right; }
        .ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }

        /* Shortened version style */
        .ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
        .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
        .ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
        .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
        .ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
        .ui-timepicker-div.ui-timepicker-oneLine dl dd,
        .ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
        .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
        .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
        .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
        .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
        .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
        .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
    </style>
</head>
<body>
<input type="text" id="datepicker1" style="width: 150px;height: 30px;text-align: center;">
<script>
    $('#datepicker1').datetimepicker({
        changeMonth: true,
        changeYear: true,
        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,
        timeText: '时间',
        hourText: '小时',
        minuteText: '分钟',
        onSelect: function (selectedDateTime) {
            console.log(selectedDateTime);
        }
    });
</script>
</body>