jQuery UI 支持的时间组件timepicker

时间 2019-11-07

标签 jquery 支持时间组件 timepicker 栏目 JQuery 繁體版

原文原文链接

JQuery UI 支持日期+时间的组件,css

网页中head中须要先写, 引入一些脚本html

<head>
    <link href="/Scripts/jquery-ui.css" rel="stylesheet" />
    <link href="/Scripts/jquery-ui-timepicker-addon.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.10.2.min.js"></script>
    <script src="/Scripts/jquery-ui.js"></script>
    <script src="/Scripts/jquery-ui-timepicker-addon.js"></script>
</head>
复制代码

还有,在body中的显示组件,是这样子的jquery

<input type="text" value="" placeholder="开始时间" name="input_datetime_start" id="datetimepicker" onchange="changeDate(this)" />
<input type="text" value="" placeholder="结束时间" name="input_datetime_end" id="datetimepicker2" />
复制代码

接着,在body中的脚本中写实现bash

$(document).ready(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']);
            //$.datepicker.formatDate("yy-mm-dd", new Date(2007, 1 - 1, 26));
            $('#datetimepicker').datetimepicker({
                needDay: true,
                changeMonth: true, //显示月份
                changeYear: true, //显示年份
                showButtonPanel: true,
                timeInput: true,
                onSelect: function (dateText, inst) {
                    $("#datetimepicker2").datetimepicker("option", "minDate", dateText);
                },
                dateFormat: "yy-mm-dd",
                timeFormat: "HH:mm:ss"
            });
            $('#datetimepicker2').datetimepicker({
                needDay: true,
                changeMonth: true, //显示月份
                changeYear: true, //显示年份
                showButtonPanel: true,
                timeInput: true,
                onSelect: function (dateText, inst) {
                    //$("#datetimepicker").datetimepicker("option", "maxDate", dateText);
                },
                dateFormat: "yy-mm-dd",
                timeFormat: "HH:mm:ss"
            });
}复制代码

当第一个输入的开始时间选好后,为你自动填充第二个的结束时间, 看下面的脚本实现ui

function changeDate(clickDate) {
            let val = $(clickDate).val();
            if (val.trim() == '') return;

            var theDate = $.trim(val.split(" ")[0]);//页面上第一个文本框的日期值

            var sdate = new Date(theDate);

            var edate = sdate;

            edate.setDate(edate.getDate() + 1);

            let m = edate.getMonth() + 1;
            if (m < 10) m = '0' + m;

            let d = edate.getDate();
            if (d < 10) d = '0' + d;

            $('#datetimepicker2').val(edate.getFullYear() + '-' + m + '-' + d + ' ' + val.split(" ")[1]);
        }复制代码

资料引用:this

1. 时间组件 spa

www.cnblogs.com/zhixi/p/658….net

www.jb51.net/article/503…code

2. 两个时间框关联
orm

blog.csdn.net/sethwiseman…

3. 中文显示 www.cnblogs.com/lost-1987/a…