文档章节

十、jquery-ui datepicker实现选择一周的日期

ssshen
 ssshen
发布于 2017/08/30 11:19
字数 317
阅读 72
收藏 0

html页面:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/jquery-ui.css">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="/static/js/jquery-ui.js"></script>
    <title>查看已上线需求</title>
</head>

<body>
    <div class='mycontainer'>
        <table>
            <tr>
                <td>日期
                    <input id="dateWeekRange" type="text" class="datePicker input-sm" placeholder="选择时间段" />
                </td>
            </tr>
        </table>
        <br/>
        <div id="showChart"></div>
    </div>
</body>
</html>

javascript:

<script type="text/javascript">  
$(document).ready(function(e) {  
    var date = new Date();  
    var mondayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
    var sundayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);

    var startDateStr = $.datepicker.formatDate('yy-mm-dd', mondayDate);
    var endDateStr = $.datepicker.formatDate('yy-mm-dd', sundayDate);
    $('#dateWeekRange').val(startDateStr + " ~ " + endDateStr);
});
var startDate;
var endDate;

jQuery(function($) {
    $.datepicker.regional['zh-CN'] = {
        firstDay: 1,
        initStatus: '请选择日期',
        isRTL: false
    };
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
    
    var selectCurrentWeek = function() {
        window.setTimeout(function() {
            $('#dateWeekRange').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }
    $('#dateWeekRange').datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) {
            var date = $(this).datepicker('getDate');

            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

            var startDateStr = $.datepicker.formatDate('yy-mm-dd', startDate, inst.settings);
            var endDateStr = $.datepicker.formatDate('yy-mm-dd', endDate, inst.settings);

            $('#dateWeekRange').val(startDateStr + " ~ " + endDateStr);
            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if (date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $(document).on("mousemove", ".ui-datepicker-calendar tr", function() {
        $(this).find('td a').addClass('ui-state-hover');
    });
    $(document).on("mouseleave", ".ui-datepicker-calendar tr", function() {
        $(this).find('td a').removeClass('ui-state-hover');
    });
});
</script>

效果如下:
输入图片说明

jQuery 1.7之后live()就被废弃了,用.on()替代

// Live
$( ".bookList li" ).live( "click", function( e ) {} );
$( document ).on( "click", ".bookList li", function( e ) {} );

参考文章:
jQuery API中文文档
jquery .bind vs .live

© 著作权归作者所有

ssshen
粉丝 2
博文 34
码字总数 12481
作品 0
海淀
程序员
私信 提问
解决 jQuery UI Datepicker 无法弹出日期的问题

今天遇到一个意想不到的bug,在使用jQuery UI Datepicker 时无法弹出日期选择框。 经过和官方的演示案例对比,最终找到了问题所在。 我使用的错误方法: <input type="text" id="to" name="t...

轻松筹社长
2014/03/31
0
0
【jQuery-UI】jQuery Timepicker Addon--时间选择插件

jQuery UI官方的日期控件Datepicker中没有提供时间(时分秒)的选择,还好网上有人写了针对jQuery UI Datepciker的插件 - jQuery Timepicker Addon,它依赖于jQuery UI中的datepicker和slide...

5W1H-
2013/01/10
0
4
[备忘]jQuery UI Datepicker的时间选择插件 - jQuery Timepi...

太遗憾了,jQuery UI官方的日期控件Datepicker中居然没有提供时间(时分秒)的选择,还好网上有人写了针对jQuery UI Datepciker的插件——jQuery Timepicker Addon,它依赖于jQuery UI中的d...

leeoo
2011/12/27
0
2
jQuery UI Datepicker 添加时分秒

默认的jQuery UI Datepicker控件没有显示时分秒功能,需要进行时分秒插件的安装及配置。 demo 地址根据自己的环境去改正 下载地址:http://download.csdn.net/download/panruifang/8518257 ...

梦梦阁
2017/11/01
0
0
jQuery UI datepicker 日期控件出现问号的解决方式

jQuery-ui的datepicker做得很不错,在项目中经常用到,但对其老是在界面上出现 “?” 感觉很不爽。出现的位置在顶部年和月之间,还有空的日期单元格。 这个问题困扰了我很长时间,一直想解决...

Chiroc
2012/09/20
0
2

没有更多内容

加载失败,请刷新页面

加载更多

IT兄弟连 Java语法教程 Java语言的跨平台特性

什么是平台 Java是可以跨平台的编程语言,那么首先我们需要知道什么是平台,通常我们把CPU与操作系统的整体称为平台。 CPU大家都知道,是计算机的大脑,它既负责思维运算,又负责计算机中各种...

老码农的一亩三分地
5分钟前
0
0
http传值问题

这两天遇到一个问题 ,与一个渠道联调接口,http请求,展示ptf 的需求,服务方以一个二进制的方式返回。 当时我们在一开始开发的时候,我们按照读取文件的方式处理,本地存一个ptf 的方式 ,...

鬼才王
14分钟前
0
0
【面试】如果你这样回答“什么是线程安全”,面试官都会对你刮目相看

不是线程的安全 面试官问:“什么是线程安全”,如果你不能很好的回答,那就请往下看吧。 论语中有句话叫“学而优则仕”,相信很多人都觉得是“学习好了可以做官”。然而,这样理解却是错的。...

中关村的老男孩
14分钟前
4
0
5.01- Druid数据源配置

1、配置项 配置 缺省值 说明 name 无 配置这个属性的意义在于,如果存在多个数据源,监控的时候 可以通过名字来区分开来。如果没有配置,将会生成一个名字, 格式是:"DataSource-" + Syste...

静以修身2025
19分钟前
0
0
itop4412开发板-Linux内核的编译

本篇文章基于itop4412开发板 5.3.2.1源码目录 Linux 内核源码在光盘“06_源码_uboot 和 kernel”目录下,如下图所示。 5.3.2.2 编译器 内核的编译器和 uboot 的编译器一样,参考“5.3.1.2 编...

书白
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部