zoukankan      html  css  js  c++  java
  • jquery UI datepicker时间控件的使用

    参考:

    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

  • 相关阅读:
    23、Linux实操篇——RPM与YUM
    22、Linux实操篇——进程管理(重点)
    21、Linux实操篇——网络配置
    20、Linux实操篇——磁盘分区、挂载
    19、Linux实操篇——组管理和权限管理
    18、实操篇——实用指令
    17、实操篇——用户管理
    UVALive 2521 Game Prediction 题解
    UVALive 2517 Moving Object Recognition(模拟)
    UVALive 2324 Human Gene Functions(动态规划)
  • 原文地址:https://www.cnblogs.com/huangyin1213/p/5574036.html
Copyright © 2011-2022 走看看