jQuery时间输入

来源：互联网发布：tv霸网络电视下载编辑：程序博客网时间：2024/04/29 04:58

导包：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']);});

截图

这里写图片描述

阅读全文

0 0