如何确保结束日期总是比开始日期多7天?

时间:2019-04-23 02:54:47

标签: javascript html

我有一个页面显示开始日期和结束日期,如下所示:

enter image description here

您可以看到,默认情况下,结束日期总是比开始日期多7天。我可以更改开始日期,但是如何确保每次更改开始日期时,结束日期也分别相距7天?

代码:

  <%

        String relPath = "../../../";
        String currentDate = CoreUtil.parseDate(new Date());

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        //get current date
        Calendar cal = Calendar.getInstance();
        //Number of Days to add
        cal.add(Calendar.DAY_OF_MONTH, 7);
        String defaultDate = sdf.format(cal.getTime());





    %>

Start Date:&emsp;<input class="txtStartDate" style="font: 13px/1.231 Trebuchet MS;" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly><br><br>


End Date: &emsp; <input class="txtEndDate" style="font: 13px/1.231 Trebuchet MS;" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>"  readonly required/>

编辑:

这是我的JavaScript代码:

<Script>
    $('#txtStartDate').datepicker();
    $('#txtEndDate').datepicker();

    $('#txtStartDate').change(function(){
        var interval = 7;

        function convertDateString(p) { return (p < 10) ? '0' + p : p; }

        var startDate = new Date($(this).val());
        startDate.setDate(startDate.getDate() + interval);
        $('#txtEndDate').val( startDate.getFullYear() + '/' +     convertDateString(startDate.getMonth() + 1) + '/' + convertDateString(startDate.getDate()));
    });

</script>

基本上,每当我更改开始日期时,结束日期也应自动更改为(开始日期+ 7天),这就是我要做的。上面的代码应该可以使用,但是当我更改开始日期时,它并没有更改我的结束日期。

2 个答案:

答案 0 :(得分:2)

这可能有帮助。

Date.prototype.addDays = function(days) {
    var date = new Date(this.valueOf());
    date.setDate(date.getDate() + days);
    return date;
}

$('#txtStartDate').datepicker();
$('#txtEndDate').datepicker();

$('#txtStartDate').change(function(){
    var interval = 7;
    var startDate = new Date($(this).val());
    $('#txtEndDate').val(startDate.addDays(interval));
});

答案 1 :(得分:2)

您可以使用JavaScript Date对象进行计算,并使用Strings进行格式化:

{
  name:{
    type:string
  },
  tax:{
    type:string,
  }
  .......
  type_of_room:[{
    category:{
      type:String,
      enum: ['SINGLEA','SINGLEB','SINGLEC','DOUBLEA','DOUBLEB','DOUBLEC','TRIPLEA','TRIPLEB','TRIPLEC','QUADA','QUADB','QUADC'],
      required: true
    },
    title:{
      type:String
    }
    price:{
      type:Number,
      required:true
    }
  }]
}
// Get references to HTML elements
const startInput = document.getElementById("txtStartDate");
const endInput = document.getElementById("txtEndDate");

// Listen for changes to #txtStartDate
startInput.addEventListener("change", updateEndDate);

// Respond to changes
function updateEndDate(event){

  // Calculate end date
  let endDate = new Date(startInput.value);
  endDate.setUTCDate(endDate.getUTCDate() + 7);

  // Separate the parts of end date
  let yyyy = endDate.getUTCFullYear(),
      mm = endDate.getUTCMonth() + 1,
      dd = endDate.getUTCDate();

  // Add initial zeros if needed
  if(mm < 10){mm = "0" + mm; }
  if(dd < 10){dd = "0" + dd; }

  // Format and display end date
  endInput.value = `${yyyy}-${mm}-${dd}`;

}