Question

我想通过警告窗口中的点击日期返回选择。例如，如果今天是4月12日，并且我点击了2016年1月1日，则警报应显示2016-1-1。

这是我的Javascript代码：

var Cal = function(divId) {
  //Store div id
  this.divId = divId;
  // Days of week, starting on Sunday
  this.DaysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  // Months, stating on January
  this.Months = ['January', 'February', 'Marhc', 'April', 'May', 'June', 'July', 'August', 'September', 'Octomber', 'November', 'December'];
  // Set the current month, year
  var d = new Date();
  this.currMonth = d.getMonth();
  this.currYear = d.getFullYear();
  this.currDay = d.getDate();
};
// Goes to next month
Cal.prototype.nextMonth = function() {
  if (this.currMonth == 11) {
    this.currMonth = 0;
    this.currYear = this.currYear + 1;
  } else {
    this.currMonth = this.currMonth + 1;
  }
  this.showcurr();
};
// Goes to previous month
Cal.prototype.previousMonth = function() {
  if (this.currMonth == 0) {
    this.currMonth = 11;
    this.currYear = this.currYear - 1;
  } else {
    this.currMonth = this.currMonth - 1;
  }
  this.showcurr();
};
// Show current month
Cal.prototype.showcurr = function() {
  this.showMonth(this.currYear, this.currMonth);
};
// Show month (year, month)
Cal.prototype.showMonth = function(y, m) {
  var d = new Date()
    // First day of the week in the selected month
    ,
    firstDayOfMonth = new Date(y, m, 1).getDay()
    // Last day of the selected month
    ,
    lastDateOfMonth = new Date(y, m + 1, 0).getDate()
    // Last day of the previous month
    ,
    lastDayOfLastMonth = m == 0 ? new Date(y - 1, 11, 0).getDate() : new Date(y, m, 0).getDate();
  var html = '<table>';
  // Write selected month and year
  html += '<thead><tr>';
  html += '<td colspan="7">' + this.Months[m] + ' ' + y + '</td>';
  html += '</tr></thead>';
  // Write the header of the days of the week
  html += '<tr class="days">';
  for (var i = 0; i < this.DaysOfWeek.length; i++) {
    html += '<td>' + this.DaysOfWeek[i] + '</td>';
  }
  html += '</tr>';
  // Write the days
  var i = 1;
  do {
    var dow = new Date(y, m, i).getDay();
    // If Sunday, start new row
    if (dow == 0) {
      html += '<tr>';
    }
    // If not Sunday but first day of the month
    // it will write the last days from the previous month
    else if (i == 1) {
      html += '<tr>';
      var k = lastDayOfLastMonth - firstDayOfMonth + 1;
      for (var j = 0; j < firstDayOfMonth; j++) {
        html += '<td class="not-current">' + k + '</td>';
        k++;
      }
    }
    // Write the current day in the loop
    var chk = new Date();
    var chkY = chk.getFullYear();
    var chkM = chk.getMonth();
    if (chkY == this.currYear && chkM == this.currMonth && i == this.currDay) {
      html += '<td class="today">' + i + '</td>';
    } else {
      html += '<td class="normal"><a href="" id="dge" onClick="MyFunction();">' + i + '</a></td>';
    }
    // If Saturday, closes the row
    if (dow == 6) {
      html += '</tr>';
    }
    // If not Saturday, but last day of the selected month
    // it will write the next few days from the next month
    else if (i == lastDateOfMonth) {
      var k = 1;
      for (dow; dow < 6; dow++) {
        html += '<td class="not-current">' + k + '</td>';
        k++;
      }
    }
    i++;
  } while (i <= lastDateOfMonth);
  // Closes table
  html += '</table>';
  // Write HTML to the div
  document.getElementById(this.divId).innerHTML = html;
};
// On Load of the window
window.onload = function() {
    // Start calendar
    var c = new Cal("divCal");
    c.showcurr();
    // Bind next and previous button clicks
    getId('btnNext').onclick = function() {
      c.nextMonth();
    };
    getId('btnPrev').onclick = function() {
      c.previousMonth();
    };
  }
  // Get element by id
function getId(id) {
  return document.getElementById(id);
}

function MyFunction(){
  alert(document.getElementById('dge').text);
}

Answer 1

我查看了示例中的日历，所有日历日期都有数据年，数据月和数据日设置（据我所见）。因此，一个简单的想法是将事件附加到具有数据月，数据年和数据日设置的每个a，然后按如下方式提醒日期...

$("a[data-year][data-month][data-day]").on("click", function(){ alert($(this).data("year")+"-"+$(this).data("month")+"-" +$(this).data("day"));})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-day="12" href="content.php?year=2017&amp;month=4&amp;day=12&amp;lang=ge" data-month="4" data-year="2017">12</a>

此外，如果您的代码对更多修改是开放的，那么日期的所有a标记都可以在class="dateClass"类中，这样您的选择器就不会像上面那样复杂，相反，只查找属于这个类的元素...就像下面的代码片段一样：

$(".dateClass").on("click", function(){ alert($(this).data("year")+"-"+$(this).data("month")+"-" +$(this).data("day"));})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="dateClass" data-day="12" href="content.php?year=2017&amp;month=4&amp;day=12&amp;lang=ge" data-month="4" data-year="2017">12</a>

----编辑----

鉴于进一步的请求（此次不使用jQuery），您可以将日期，月份和年份添加到a标记作为属性，并将this发送到该函数，以便当前点击的a元素被发送到函数（顺便删除重复的标识dge），如下所示：

html += '<td class="normal"><a href="" id="dge" onClick="MyFunction();">' + i + '</a></td>';

成为

html += '<td class="normal"><a href="" day="'+this.currDay+'" month="'+this.currMonth+'" year="'+this.currYear+'" onClick="MyFunction(this);">' + i + '</a></td>';

然后下面的代码片段可以解决这个问题：

function MyFunction(val){
alert(val.getAttribute("day")+"-"
+val.getAttribute("month")+"-"
+val.getAttribute("year"));
};

<a href="" day="3" month="2" year="2017" onClick="MyFunction(this);">3</a>
<a href="" day="4" month="2" year="2017" onClick="MyFunction(this);">4</a>

返回日历中点击的日期值

1 个答案: