jQuery ui 日期选择器

莉迪亚·拉

我有两个与此代码相关的问题。

我想知道如何默认为当前的一周间隔,而不仅仅是在选择日期时。

然后我想知道是否可以简单地显示组成这个日期间隔的每一天。

例如 :

周:08/13/2017 - 08/19/2017

星期一 14

星期四 15

...

我提前谢谢你

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
    var startDate;
    var endDate;
    
    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }
    
    $('.week-picker').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());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
            $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
            
            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();
        }
    });
    
    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
    <div class="week-picker"></div>
    <br /><br />
    <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>

阿迈勒

试试这个代码

for (var newDate = new Date(startDate); newDate <= endDate; newDate.setDate(newDate.getDate() + 1)) {
    var currDay=days[newDate.getDay()];
    var currDate=newDate.getDate();
    $(".days").append('<label>'+currDay+' :'+currDate+'</label><br>');
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script type="text/javascript">
$(function() {
    var startDate;
    var endDate;
    
    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }
    
    $('.week-picker').datepicker( {
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
             var days=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
            $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
           $(".days").empty();
           for (var newDate = new Date(startDate); newDate <= endDate;                   newDate.setDate(newDate.getDate() + 1)) {
              var currDay=days[newDate.getDay()];
              var currDate=newDate.getDate();
               $(".days").append('<label>'+currDay+' :'+currDate+'</label><br>');
           }
            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();
        }
    });
    
    $('.week-picker .ui-datepicker-calendar tr').on('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').on('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
    <div class="week-picker"></div>
    <br /><br />
    <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
     <div class="days"></div>
</body>
</html>

希望这可以帮助

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在jQuery UI日期选择器中动态设置最小和最大日期

来自分类Dev

jQuery UI-无法使日期选择器正常工作

来自分类Dev

jQuery Ui日期选择器不起作用?

来自分类Dev

如何在jQuery UI日期选择器中禁用公共假期?

来自分类Dev

jQuery UI的日期选择器未出现在动态输入上

来自分类Dev

jQuery UI日期选择器,文本框中带有默认文本

来自分类Dev

jQuery Ui日期时间选择器

来自分类Dev

无法使用jQuery UI的日期选择器设置默认日期

来自分类Dev

如何使jQuery UI日期选择器与angular2一起使用?

来自分类Dev

未来的日期引发错误的jQuery UI的日期选择器

来自分类Dev

将jquery UI日期选择器绑定到输入元素的焦点上

来自分类Dev

jQuery Mobile UI日期选择器格式

来自分类Dev

jQuery UI-无法使日期选择器正常工作

来自分类Dev

jQuery UI:日期选择器显示不正确

来自分类Dev

如何在jQuery UI日期选择器中禁用公共假期?

来自分类Dev

在jQuery Mobile UI中添加日期选择器

来自分类Dev

在JQuery UI日期选择器中选择星期数或日期

来自分类Dev

jQuery UI日期选择器显示不正确

来自分类Dev

无法使用jQuery UI的日期选择器比较日期

来自分类Dev

jQuery UI日期时间选择器

来自分类Dev

jQuery UI日期选择器克隆年份重叠如何计算

来自分类Dev

jQuery UI日期选择器日期格式

来自分类Dev

没有Jquery UI,是否可能有日期选择器?

来自分类Dev

如何验证jQuery UI日期选择器“从日期”到“到日期”

来自分类Dev

jQuery-UI 的日期选择器的默认日期范围

来自分类Dev

如何在 aurelia 中使用 JQuery UI 日期选择器更改语言环境?

来自分类Dev

在 Jquery UI 日期选择器中与日期一起显示动态价格

来自分类Dev

jQuery UI 日期选择器 - 通过单击另一个按钮更改范围

来自分类Dev

向 jQuery UI 日期选择器添加第二个日期格式不起作用

Related 相关文章

  1. 1

    如何在jQuery UI日期选择器中动态设置最小和最大日期

  2. 2

    jQuery UI-无法使日期选择器正常工作

  3. 3

    jQuery Ui日期选择器不起作用?

  4. 4

    如何在jQuery UI日期选择器中禁用公共假期?

  5. 5

    jQuery UI的日期选择器未出现在动态输入上

  6. 6

    jQuery UI日期选择器,文本框中带有默认文本

  7. 7

    jQuery Ui日期时间选择器

  8. 8

    无法使用jQuery UI的日期选择器设置默认日期

  9. 9

    如何使jQuery UI日期选择器与angular2一起使用?

  10. 10

    未来的日期引发错误的jQuery UI的日期选择器

  11. 11

    将jquery UI日期选择器绑定到输入元素的焦点上

  12. 12

    jQuery Mobile UI日期选择器格式

  13. 13

    jQuery UI-无法使日期选择器正常工作

  14. 14

    jQuery UI:日期选择器显示不正确

  15. 15

    如何在jQuery UI日期选择器中禁用公共假期?

  16. 16

    在jQuery Mobile UI中添加日期选择器

  17. 17

    在JQuery UI日期选择器中选择星期数或日期

  18. 18

    jQuery UI日期选择器显示不正确

  19. 19

    无法使用jQuery UI的日期选择器比较日期

  20. 20

    jQuery UI日期时间选择器

  21. 21

    jQuery UI日期选择器克隆年份重叠如何计算

  22. 22

    jQuery UI日期选择器日期格式

  23. 23

    没有Jquery UI,是否可能有日期选择器?

  24. 24

    如何验证jQuery UI日期选择器“从日期”到“到日期”

  25. 25

    jQuery-UI 的日期选择器的默认日期范围

  26. 26

    如何在 aurelia 中使用 JQuery UI 日期选择器更改语言环境?

  27. 27

    在 Jquery UI 日期选择器中与日期一起显示动态价格

  28. 28

    jQuery UI 日期选择器 - 通过单击另一个按钮更改范围

  29. 29

    向 jQuery UI 日期选择器添加第二个日期格式不起作用

热门标签

归档