Javascript获取某个范围内每个工作日的月/日值?

dldeef67  于 2023-01-16  发布在  Java
关注(0)|答案(2)|浏览(133)

下面的javascript代码创建了一个周历,提供了startDate和endDate:Weekly Calendar Widget

  • 如何调整它,使其同时给予该范围内每个工作日的月/日值?
  • 例如,我需要将以下变量输出到表单中:
  • 变量开始日期;(例如:2013年10月11日)
  • 变量结束日期;(例如:2013年11月16日)
  • 变量sunDate;(需要..11/10)
  • 变量monDate;(需要..11/11)
  • 变量tue日期;(需要..11/12)
  • 日期;(需要..11/13)
  • 变量thu日期;(需要..11/14)
  • 变量friDate;(需要..11/15)
  • 变量饱和日期;(需要..11/16)

会不会是...?

var sunDate =结束日期-6(格式为mm/dd)

下面是javascript日历代码:

see link: Weekly Calendar Widget

以下是我更新后的代码,这些代码最终为我所用:

<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var monDate;
var tueDate;
var wedDate;
var thuDate;
var friDate;
var satDate;
var sunDate;
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,
    dateFormat: "mm/dd",
    firstDay: 1, // Start with Monday
    onSelect: function(dateText, inst) { 
        var date = $(this).datepicker('getDate');
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
        monDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
        tueDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
        wedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
        thuDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
        friDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
        satDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
        sunDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
        var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
        $('#startDate').val($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
        $('#endDate').val($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
        $('#monDate').val($.datepicker.formatDate( dateFormat, monDate, inst.settings ));
        $('#tueDate').val($.datepicker.formatDate( dateFormat, tueDate, inst.settings ));
        $('#wedDate').val($.datepicker.formatDate( dateFormat, wedDate, inst.settings ));
        $('#thuDate').val($.datepicker.formatDate( dateFormat, thuDate, inst.settings ));
        $('#friDate').val($.datepicker.formatDate( dateFormat, friDate, inst.settings ));
        $('#satDate').val($.datepicker.formatDate( dateFormat, satDate, inst.settings ));
        $('#sunDate').val($.datepicker.formatDate( dateFormat, sunDate, 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>

然后在我的HTML中,我使用了:

<thead>
<tr>
  <th>Type</th>
  <th>Mon<br>
    <input disabled id="monDate" size="5" data-mini="true"></th>
  <th>Tue<br>
    <input disabled id="tueDate" size="5" data-mini="true"></th>
  <th>Wed<br>
    <input disabled id="wedDate" size="5" data-mini="true"></th>
  <th>Thu<br>
    <input disabled id="thuDate" size="5" data-mini="true"></th>
  <th>Fri<br>
    <input disabled id="friDate" size="5" data-mini="true"></th>
  <th>Sat<br>
    <input disabled id="satDate" size="5" data-mini="true"></th>
  <th>Sun<br>
    <input disabled id="sunDate" size="5" data-mini="true"></th>
  <th>Totals</th>
  <th>Description</th>
</tr>

这是我的完整HTML页面:https://dl.dropboxusercontent.com/u/58096637/Timesheet.txt

lmyy7pcs

lmyy7pcs1#

来自手册:www.example.comhttp://api.jqueryui.com/datepicker/#option-dateFormat

$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });

在您的代码中:

$('.week-picker').datepicker( {
    showOtherMonths: true,
    selectOtherMonths: true,
    dateFormat: "dd/mm",

您的代码看起来很好,但仅当firstDay为1时有效,已更新代码以使用您提供的html

$(function() {
  //removed all variables
  var selectCurrentWeek = function() {
    window.setTimeout(function () {
      $('.week-picker').find('.ui-datepicker-current-day a')
        .addClass('ui-state-active')
    }, 1);
  }

  //changed this function
  $('.week-picker').datepicker( {
    showOtherMonths: true,
    selectOtherMonths: true,
    dateFormat: "mm/dd",
    firstDay: 1, // Start with Monday
    onSelect: function(dateText, inst) { 
      var date = $(this).datepicker('getDate'),
      start = inst.settings.firstDay || $.datepicker._defaults.firstDay,
      year = date.getFullYear(),month = date.getMonth(),
      day = (date.getDate()-date.getDay()),
      elIds=["#monDate","#tueDate","#wedDate","#thuDate","#friDate","#satDate",
        "#sunDate","#startDate","#endDate"],
      i=-1,start,dates=[],
      dateFormat = inst.settings.dateFormat || 
        $.datepicker._defaults.dateFormat,
      day=(date.getDay()<start)?(day+start)-7:day+start;
      while(++i<7){
        dates.push(new Date(year,month,day+i));
        $(elIds[i]).val($.datepicker.formatDate( dateFormat, dates[i]
          , inst.settings ));
      }
      i=-1;
      $(elIds[7]).val($.datepicker.formatDate( dateFormat, dates[0],
        inst.settings ));
      $(elIds[8]).val($.datepicker.formatDate( dateFormat, dates[6],
        inst.settings ));
      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');
  });
});
eimct9ow

eimct9ow2#

我向Date原型添加了addSeconds(seconds)subtractSeconds(seconds)format(some_format),format函数使用与MySQL DATE_FORMAT函数完全相同的格式。
示例...从your fiddle中的startDate开始

var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
for (var x = 1; x <= 7; ++x) {
  // add 1 day (in seconds)
  startDate.addSeconds(24 * 60 * 60);
  alert("day " + x + " = " + startDate.format("%m/%d"));
}

复制并粘贴所有这些代码,这些代码扩展了Date对象的功能。

/**
 * Add a number of seconds to the current date
 * @return Date The date object
 */
Date.prototype.addSeconds = function(seconds) {
  var time = this.getTime();
  alert("time = " + time);
  time += seconds * 1000;
  this.setTime(time);
  return this;
}

/**
 * Subtract a number of seconds to the current date
 * @return Date The date object
 */
Date.prototype.subtractSeconds = function(seconds) {
  var time = this.getTime();
  alert("time = " + time);
  time -= seconds * 1000;
  this.setTime(Math.max(0, time));
  return this;
}

/**
 * DATE
 *   format() - uses MySQL date formatting... a few of the more obscure formats are left unfinished
 */
Date.prototype.format = function(format) {
  var short_months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var short_days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

  var escaped = false;
  var pieces = new Array();
  for (var x = 0; x < format.length; ++x) {
    if (!escaped) {
      if (format.charAt(x) != "%") {
        pieces.push(format.charAt(x));
      } else {
        escaped = true;
      }
      continue;
    }

    switch (format.charAt(x)) {
    case "a":
      pieces.push(short_days[this.getDay()]); break;
    case "b":
      pieces.push(short_months[this.getMonth()]); break;
    case "c":
      pieces.push(Number(this.getMonth()) + 1); break;
    case "D":
      pieces.push(this.getDate()); break;
    case "d":
      var day_of_month = new String(this.getDate());
      pieces.push(day_of_month.pad(2, "0")); break;
    case "e":
      pieces.push(this.getDate()); break;
    case "f":
      var microseconds = new String(this.getMilliseconds() * 1000);
      pieces.push(microseconds.pad(6, "0")); break;
    case "H":
      pieces.push(this.getHours()); break;
    case "h":
      var hours = this.getHours() % 12;
      hours = (hours == 0) ? "12" : new String(hours);
      pieces.push(hours.pad(2, "0")); break;
    case "I":
      var hours = this.getHours() % 12;
      hours = (hours == 0) ? "12" : new String(hours);
      pieces.push(hours.pad(2, "0")); break;
    case "i":
      var minutes = new String(this.getMinutes());
      pieces.push(minutes.pad(2, "0")); break;
    case "j": // day of the year 001...365
      pieces.push("???"); break;
    case "k":
      pieces.push(this.getHours()); break;
    case "l":
      var hours = this.getHours() % 12;
      pieces.push((hours == 0) ? "12" : hours); break;
    case "M":
      pieces.push(months[this.getMonth()]); break;
    case "m":
      var month = new String(Number(this.getMonth()) + 1);
      pieces.push(month.pad(2, "0")); break;
    case "p":
      pieces.push((this.getHours() < 12) ? "AM" : "PM"); break;
    case "r": // 12-hour hh:mm:ss AM/PM
      pieces.push("?"); break;
    case "S": case "s":
      pieces.push(this.getSeconds()); break;
    case "T": // 24-hour hh:mm:ss
      pieces.push("?"); break;
    case "u": case "U":
    case "v": case "V":
      pieces.push("?"); break;
    case "W":
      pieces.push(days[this.getDay()]); break;
    case "w":
      pieces.push(this.getDay()); break;
    case "x": case "X": // year for the week w/sunday or monday starting???
      pieces.push("?"); break;
    case "Y":
      pieces.push(this.getFullYear()); break;
    case "y":
      var full_year = new String(this.getFullYear());
      pieces.push(full_year.substr(2, 2)); break;
    default:
      pieces.push(format.charAt(x)); break;
    }
    escaped = false;
  }

  return pieces.join("");
}

相关问题