Question

我有月份和年份选择器，因为我使用了这段代码：

<!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.7.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
  <script type="text/javascript">
    $(function() {
      $('.date-picker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        minDate: 0,
        onClose: function(dateText, inst) {
          $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
        }
      });
    });
  </script>
  <style>
    .ui-datepicker-calendar {
      display: none;
    }
  </style>
</head>

<body>
  <label for="startDate">Date :</label>
  <input name="startDate" id="startDate" class="date-picker" />
</body>

</html>

$(function() {
  $('.date-picker').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    minDate: 0,
    onClose: function(dateText, inst) {
      $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    }
  });
});

.ui-datepicker-calendar {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">


<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />

工作正常。我的要求是，如果我选择2017年8月，我需要在不同的div中显示所有日期。因此基于Month＆amp;年份选择日期应显示

例如：

2017年8月

div 1    div 1     div 3     div 3 
1          2         3         4
Sunday    Monday   Tuesday    wednesday

像这样我想显示特定月份的所有日期

Answer 1

我认为这个简单的代码会对你有所帮助。使用此并享受。感谢..

<!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.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <style type="text/css">
.datediv{

    border:1px solid;
    padding: 10px;
}
</style>
<script type="text/javascript">
var weekday = new Array(7);
        weekday[0] = "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";
$(function() {


    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        minDate: 0,
        onClose: function(dateText, inst) { 
            $d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            html='';
            for(i=1;i<=$d;i++){
                console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
                d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
                console.log(d);
                n = weekday[d.getDay()];
                html += '<div class="datediv'+i+'">div-'+i+'<br><span id="div-'+i+'">'+n+'</span></div><br>';
            }
            $('#datecontent').html(html);
        }
    });
});
</script>
<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
    <div id="datecontent">
    </div>
</body>
</html>

Answer 2

好像你正在制作日历。这段代码应该有效：

var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
$('.date-picker').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',
  minDate: 0,
  onClose: function(dateText, inst) {
    $d = new Date(inst.selectedYear, parseInt(inst.selectedMonth) + 1, 0).getDate();
    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    html = '';
    for (i = 1; i <= $d; i++) {
      d = new Date(inst.selectedYear + '-' + (parseInt(inst.selectedMonth) + 1) + '-' + i);
      n = weekday[d.getDay()];
      html += '<div class="datediv">' + i + '<br>' + n + '</div><br>';
    }
    $('#datecontent').html(html);
  }
});

.datediv {
  border: 1px solid;
  padding: 10px;
}

.ui-datepicker-calendar {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent">
</div>

jQuery显示日期基于月

2 个答案: