jquery类选择器函数不能接受日期作为争论

时间:2017-07-03 19:57:12

标签: javascript jquery date datepicker

我使用的功能成功计算并且(应该成功)返回星期二的日期,如果今天是星期二,星期三,如果是星期三,如果它是今天的某一天它应该在下周二回来。此函数用于将此日期放入datepicker输入的默认值。我已经验证该功能实际上确实计算了正确的使用日期。但是,将返回值传递给选择器的参数时,输入对象中不会显示日期。

我尝试将字符串和数字输入到选择器函数的第二个参数而不是setDate()中,但它仍然没有显示任何内容。

有关导致此问题的原因的历史记录,您可以参考此问题Original question that led to this question

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My Title</title>
    <!-- for datepicker -->
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
    <!-- for timepicker -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
    <!-- for momentjs -->    
    <script src="//momentjs.com/downloads/moment.min.js"/></script>
    <script src="//momentjs.com/downloads/moment-with-locales.min.js"></script>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" />
    <script type="text/javascript">   
        $(document).ready(function(){
            $( ".datepicker" ).datepicker({
                minDate:'0',
                changeMonth:true,
                changeYear:true,
            beforeShowDay:
                  function(dt)
                  {
                      return [dt.getDay() === 2 || dt.getDay() === 3, ""];
                  }});
            });

        // function moment().isoWeekday is from Momentjs script source above.
        // to automatically set the date to the next tuesday or wednesday if not already one of those days.
        function setDate() {
            var today = moment().isoWeekday(); //or just = new Date().getDay();
            var timestamp;
            if (today <= 2) {
                timestamp = moment().isoWeekday(2);
            } else if (today === 3) {
                timestamp = moment().isoWeekday(3);
            } else {
                timestamp = moment().add(1, 'weeks').isoWeekday(2);
            }
            document.write(new Date(timestamp));
            return new Date(timestamp);
        }
        // Problem occurs here: it's like setDate() wont' give datepicker something it can display.

        $('.datepicker').datepicker("setDate", setDate());            


        $(document).ready(function(){
            $('input.timepicker').timepicker({
                timeFormat: 'h:mm p',
                interval: 90,
                minTime: '9',
                maxTime: '10:30am',
                defaultTime: '9',
                startTime: '9:00',
                dynamic: false,
                dropdown: true,
                scrollbar: false                
            });
        });
    </script>
</head>
<body>

<form method="POST">
  <div style='margin:0 auto; text-align:center;'>
    <label>Appointment Date: </label>
    <input type="hidden" name="action" value="list_appointments" />
    <input type="text" id="datepicker" name="date" class="datepicker" />
    <input type="submit" value="Refresh List" name="Update" />
    <br />
  </div>
</form>
<body>

1 个答案:

答案 0 :(得分:1)

我相信这就是你所需要的。请记住将函数调用保留在同一文档加载函数中,即$(document.ready)。

    <script type="text/javascript">   
        $(document).ready(function() {
            $( ".datepicker" ).datepicker({
                minDate:'0',
                changeMonth:true,
                changeYear:true,
                beforeShowDay: function(dt)
                  {
                      return [dt.getDay() === 2 || dt.getDay() === 3, ""];
                  }
            });

            $('input.timepicker').timepicker({
                timeFormat: 'h:mm p',
                interval: 90,
                minTime: '9',
                maxTime: '10:30am',
                defaultTime: '9',
                startTime: '9:00',
                dynamic: false,
                dropdown: true,
                scrollbar: false                
            });

            function setDate() {
                var today = moment().isoWeekday(); //or just = new Date().getDay();
                var timestamp;
                if (today <= 2) {
                    timestamp = moment().isoWeekday(2);
                } else if (today === 3) {
                    timestamp = moment().isoWeekday(3);
                } else {
                    timestamp = moment().add(1, 'weeks').isoWeekday(2);
                }
                return new Date(timestamp);
            }

            $('.datepicker').datepicker("setDate", setDate());          
        });

        // function moment().isoWeekday is from Momentjs script source above.
        // to automatically set the date to the next tuesday or wednesday if not already one of those days.

        // Problem occurs here: it's like setDate() wont' give datepicker something it can display.     
    </script>