Question

我的工作安排有两周的时间。我想制作一个简单的html页面使用日期选择器和三个文本框：

Textbox1：查看选定的DatePicker周数。
Textbox2：查看选定的DatePicker日期名称。
Textbox3：如果我当天工作或者我已经关闭，则显示选定的DatePicker。

Textbox3有14种不同的案例。我得到了以下不起作用的代码。有人可以调查并告诉我我做错了吗？

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Format date</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="/scripts/jquery.ui.datepicker-it.js"></script>

<script>
$(function() {
  var weekStart = new Date(2017, 1, 27);
  var roster = ['work', 'off', 'off', 'work', 'work', 'work', 'work',
  	'off', 'work', 'work', 'work', 'off', 'off', 'work'];
  $('#date').datepicker({minDate: weekStart, onSelect: function(dateStr) {
    var date = $(this).datepicker('getDate');
    var days = Math.floor((date.getTime() - weekStart.getTime()) / (24 * 60 * 60 * 1000));
    var week = Math.floor(days / 7) % 2;
    $('#week').text(week + 1);
    $('#day').text($.datepicker.formatDate('DD', date));
    $('#work').text(roster[week * 7 + date.getDay() - 1]);
  }});
});
</script>
</head>
<body>
 
<p>Date: <input type="text" id="date"></p>
<p>Day: <input type="text" id="day"></p>
<p>week: <input type="text" id="week"></p>
<p>work: <input type="text" id="work"></p>

</body>
</html>

＆＃13;

Answer 1

您需要使用val()填充输入框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Format date</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="/scripts/jquery.ui.datepicker-it.js"></script>

<script>
$(function() {
  var weekStart = new Date(2017, 1, 27);
  var roster = ['work', 'off', 'off', 'work', 'work', 'work', 'work',
  	'off', 'work', 'work', 'work', 'off', 'off', 'work'];
  $('#date').datepicker({minDate: weekStart, onSelect: function(dateStr) {
    var date = $(this).datepicker('getDate');
    var days = Math.floor((date.getTime() - weekStart.getTime()) / (24 * 60 * 60 * 1000));
    var week = Math.floor(days / 7) % 2;
    $('#week').val(week + 1);
    $('#day').val($.datepicker.formatDate('DD', date));
    $('#work').val(roster[week * 7 + date.getDay() - 1]);
  }});
});
</script>
</head>
<body>
 
<p>Date: <input type="text" id="date"></p>
<p>Day: <input type="text" id="day"></p>
<p>week: <input type="text" id="week"></p>
<p>work: <input type="text" id="work"></p>

</body>
</html>

如何获得工作时间表

1 个答案: