jQuery时间控件

已于 2022-04-26 11:31:01 修改
阅读量3.7k 收藏 7
点赞数 2
分类专栏： jq 文章标签： html5 javascript jquery
于 2022-04-26 11:20:47 首次发布
原文链接：https://www.jq22.com/jquery-info23561
版权

时间控件

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .dateinputer{
            line-height:40px;
            height:40px;
            margin:10px 0;
            border:1px solid #ccc;
            cursor: pointer;
            position:relative;
            /*top:10px;*/
            /*left:20px;*/
            padding:0 6px;
            font-size:12px !important;
        }
        .flex-div{
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-flow: column;
            margin-left:30px;
            margin-top:20px;
        }
    </style>
</head>

<body>
<div class="flex-div">
    <span>date 单日选择器</span>
    <a id="destroy">销毁日历</a>
    <div id='date' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>datetime 单日加时间选择器</span>
    <div id='datetime' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>month 月选择器</span>
    <div id='month' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>year 年选择器</span>
    <div id='year' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>daterange 日期区间选择器</span>
    <div id='daterange' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>monthrange 月区间选择器</span>
    <div id='monthrange' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>yearrange 年区间选择器</span>
    <div id='yearrange' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>week 周选择器</span>
    <div id='week' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>multiple 多日期选择器</span>
    <div id='multiple' class="dateinputer">

    </div>
</div>

</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="moment.js"></script>
<script type="text/javascript" src="xndatepicker.js"></script>
<script type="text/javascript">
	$('.vbtn').on('click',function(){
		console.log($('#year').val())
	})
    var date=new XNDatepicker($("#date"),{
        // format:'YYYY-MM-DD',
        type:'date',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    },)
    $("#destroy").click(()=>{
        date.destroy();
    })
    var datetime=new XNDatepicker($("#datetime"),{
        // format:'YYYY-MM-DD',
        type:'datetime',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    },)
    var month=new XNDatepicker($("#month"),{
        // format:'YYYY-MM-DD',
        type:'month',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    },)
    var year=new XNDatepicker($("#year"),{
        format:'YYYY',
        type:'year',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    },)
	/* endStartOne: endStartOne||'2022-04-21',
	endStartTwo: endStartTwo||'2022-12-21',
	startDateOne: startDateOne||'2022-03-21',
	startDateTwo: startDateTwo||'2022-05-21' */
    var daterange=new XNDatepicker($("#daterange"),{
        // format:'YYYY-MM-DD',
        type:'daterange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'2022-04-21',
        endTime:'2022-12-21',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    },)
    var monthrange=new XNDatepicker($("#monthrange"),{
        // format:'YYYY-MM-DD',
        type:'monthrange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    },)
    var yearrange=new XNDatepicker($("#yearrange"),{
        // format:'YYYY-MM-DD',
        type:'yearrange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    },)
    var week=new XNDatepicker($("#week"),{
        // format:'YYYY-MM-DD',
        type:'week',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates:[],//当为多选日期类型时的初始值
        startTime:'',
        // endTime:'2036-04-04',
        // minDate:'2019-04-04',
        maxDate:'',
        separator:' 到 ',
        showType:'modal',
        linkPanels:false,//面板联动
        showClear:true,//是否显示清除按钮
        autoConfirm:true,
        showShortKeys:true,
        autoFillDate:true,//自动变更element里面的值
    },function(data){
        console.log(data)
    },)
var multiple=new XNDatepicker($("#multiple"),{
    // format:'YYYY-MM-DD',
    type:'multiple',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
    multipleDates:[],//当为多选日期类型时的初始值
    startTime:'',
    // endTime:'2036-04-04',
    minDate:'2019-04-04',
    maxDate:'',
    separator:' 到 ',
    showType:'modal',
    linkPanels:false,//面板联动
    showClear:true,//是否显示清除按钮
    autoConfirm:true,
    showShortKeys:true,
    autoFillDate:true,//自动变更element里面的值
},function(data){
    console.log(data)
},)
</script>

</html>

html+css+js文件

下载地址

截图
转自jquery插件库

有什么问题，请多多指教，感谢！！！

快乐止于安静
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery日期时间控件
瀞心：软件人生
11-06 2115
代码下载地址：  jquery日期时间控件下载地址 。  工作中用到， 这里分享一下， 避免重复摸索劳动。          一、 HTML 文件    jquery 日期时间控件 var obtainTimeStamp = function(dateTimeStr
jquery时间控件
08-23
时间控件js：jquery-ui-timepicker-addon.js 对应函数及默认属性设置：function Timepicker()
jquery 日期时间控件
11-06
jquery 日期时间控件， 必要依赖及示例， 避免重复劳动
jquery 日期组件
最新发布
weixin_40616790的博客
07-21 27
jQuery日期组件科普文章 jQuery是一个快速、小巧且功能丰富的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax交互。jQuery插件是扩展jQuery功能的组件，其中日期组件是常用插件之一，用于在网页上创建和管理日期选择器。本文将介绍jQuery日期组件的基本概念、使用方法和代码示例。 j...
JQuery时间控件
weixin_40989555的博客
05-11 249
Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1,//月 "d+": this.getDate(),//日 "h+": this.getHours(),//小时 "m+": this.getMinutes(),//分钟 "s+": this.getSeconds(),//秒 "q+": Math.floor((this.getMonth() + 3) / 3),//季度 .
JQUERY时间控件
09-02
**jQuery时间控件详解** 在Web开发中，用户界面的交互性和用户体验往往直接影响到网站或应用的质量。其中，时间与日期的选择是常见的交互元素之一，它在表单填写、事件预订、日程管理等场景中不可或缺。jQuery作为...
jquery时间控件时分秒
05-10
而"jquery时间控件时分秒"是jQuery的一个扩展插件，用于创建用户友好的时间选择器，帮助用户方便地输入或选择时间，通常用于表单中的时间输入字段。这种控件在许多场合都非常实用，比如预订系统、日程安排或时间跟踪...
Jquery 时间控件
08-10
**jQuery时间控件详解** 在Web开发中，用户界面的交互性和用户体验往往直接影响到网站或应用的质量。时间控件作为用户界面的一个重要组成部分，能够帮助用户方便地选择和输入日期及时间，提升操作效率。本篇文章将...
JQuery 时间控件、日期控件
04-01
本主题将深入探讨jQuery中的时间控件和日期控件，这些组件在创建交互式用户界面时非常有用，特别是在处理表单输入或日历功能时。 1. **jQuery UI Datepicker** jQuery UI 提供了一个名为 "Datepicker" 的插件，它...
jQuery中的日期时间控件
热门推荐
ymlvtimi的博客
05-23 1万+
1、需要的样式及js <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ > <script src="jquery.js"></script> <script src="jquery.datetimepicker.js"></script> ...
jquery时间插件
06-02
jquery时间插件laydate，有范例，有使用说明，很实用，兼容性好。
Jquery时间日期控件[修改][日期时间-日期-时间]
07-12
Jquery时间日期控件[日期时间-日期-时间]日期时分秒，单独日期，单独时分秒，附demo，颜色可自行修改
jq时间插件
03-01
一个时间插件，已过的时间不能选择，只能选今天和之后的时间
JQuery日期插件
03-08
JQuery日期插件，内附完整的使用方式 laydate({ elem: '#xkzqdsj2', format: 'YYYY年MM月DD日', value:"2013年12月02号", festival: true, //显示节日 choose: function(datas){ //选择日期完毕的回调 } });
jquery 日期插件
Summer_i的博客
01-12 458
http://laydate.layui.com/  layDate   导入  layDate.js文件，   这是是一个最简单的调用方式，它会把自身作为目标元素。除此之外，您还可以按照需求传入一些其它key，比如： 那么对于输入框，如果用户乱填怎么办？没关系，laydate会智能纠错，你可以尝试在上述表单输入任意值，然后点击页面其它处测试一下。 当然，您其实还可以设
jquery 时间插件
03-20
NULL 博文链接：https://goby2008.iteye.com/blog/785042
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值