jQuery时间输入

最新推荐文章于 2022-09-08 17:32:53 发布

CrazZy651314

最新推荐文章于 2022-09-08 17:32:53 发布

阅读量865

点赞数 2

分类专栏： html+css 文章标签： jquery

本文链接：https://blog.csdn.net/qinqigang/article/details/78736467

版权

html+css 专栏收录该内容

9 篇文章 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>
        <!--添加datepicker支持-->
    <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']);
});