开发者社区> 芝麻软件> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery UI datepicker时间控件的使用

简介: 参考: http://api.jqueryui.com/datepicker/#method-show 英文 http://www.helloweba.com/view-blog-168.html  中文 http://jqueryui.
+关注继续查看

参考:

http://api.jqueryui.com/datepicker/#method-show 英文

http://www.helloweba.com/view-blog-168.html  中文

http://jqueryui.com/datepicker/

效果:

常用场合:

  1.输入框

  2.div

使用方法:

1.限制日期

$("#resultDiv").datepicker({
                onSelect: function (dateText, inst) {
                    //代码:选择日期后触发的事件
                },
                minDate: new Date(),//最小日期
                maxDate: new Date($("#DateLimit").val())//最大日期
            });

 2.中文

jQuery(function ($) {
        $.datepicker.regional['zh-CN'] = {
            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']);
    });

 3.时间段查询用法

$(document).ready(function () {
         $('#SearchStartDT').datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function (startDate) {
                var $startDate = $("#SearchStartDT");
                var $endDate = $('#SearchEndDT');
                var endDate = $endDate.datepicker('getDate');
                if (endDate < startDate) {
                    $endDate.datepicker('setDate', startDate - 3600 * 1000 * 24);
                }
                $endDate.datepicker("option", "minDate", startDate);
            }
        });
        $('#SearchEndDT').datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function (endDate) {
                var $startDate = $("#SearchStartDT");
                var $endDate = $('#SearchEndDT');
                var startDate = $startDate.datepicker("getDate");
                if (endDate < startDate) {
                    $startDate.datepicker('setDate', startDate + 3600 * 1000 * 24);
                }
                $startDate.datepicker("option", "maxDate", endDate);
            }
        });
        $("#SearchStartDT").datepicker("option", "maxDate", new Date());
        $("#SearchEndDT").datepicker("option", "maxDate", new Date());
    });

4.只显示月份

 多种解决方法:http://www.itstrike.cn/Question/c7c3214d-0a6b-4d89-8b4f-f7753763e927.html

 

 

 

 

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
swift UI专项训练28 DatePicker日期老虎机
    如果你设置过iPhone中的日期,那么你对日期老虎机一定不陌生。它的基类是UIDatePicker。
885 0
jQuery UI Datepicker中文显示
jqueryuifunction [javascript] view plaincopy jQuery UI Datepicker这个用于日期显示很方便而且提供了多种样式,可以从jQuery UI中选择喜欢的样式和jQuery UI组件随意下载js库,如果只是使用datepicker那么选择时之选UI Core和Widgets中的Datepicker,然后选择喜欢的主题,选择版本,下载即可。
674 0
jquery ui datepicker 只能选今天以后的日期
 $("input[name=begintime],input[name=endtime],input[name=Arrivedate]").datepicker({dateFormat:"yy-mm-dd",minDate: new Date()});
758 0
SAP 电商云 Spartacus UI userID 即邮件地址中的加号问题
SAP 电商云 Spartacus UI userID 即邮件地址中的加号问题
0 0
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现
0 0
测试 SAP 电商云 Spartacus UI 3.4.x 和 4.3.x 的 guest checkout 功能
测试 SAP 电商云 Spartacus UI 3.4.x 和 4.3.x 的 guest checkout 功能
0 0
SAP 电商云 Spartacus UI 里的 ASM 模块启用的前置条件
SAP 电商云 Spartacus UI 里的 ASM 模块启用的前置条件
0 0
关于 SAP 电商云 Spartacus UI 里 Router 模块的 forRoot 方法
关于 SAP 电商云 Spartacus UI 里 Router 模块的 forRoot 方法
0 0
+关注
芝麻软件
编程语言,框架相关专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
使用TensorFlow搭建智能开发系统自劢生成App UI代码
立即下载
使用TensorFlow搭建智能开发系统自劢生成App UI代码
立即下载
使用TensorFlow搭建智能开发系统自劢生成App UI代码
立即下载