日期选择器显示在2个不同的日期

时间:2022-09-26 21:46:10

I recently implemented a date picker with moment.js. For some reason its displaying the wrong date. I displayed the date outside the date picker and it was fine. I console.logged the variables to see what was being stored and that turned out to be the format I wanted. However when I call the data in the date picker it displays in the wrong format. It should be exactly the same whats being outputted underneath the date picker. Can someone explain where I'm going wrong?

我最近用moment.js实现了一个日期选择器。由于某种原因,它显示错误的日期。我在日期选择器之外显示了日期,很好。我控制台。记录变量以查看存储的内容,结果证明是我想要的格式。但是,当我在日期选择器中调用数据时,它以错误的格式显示。它应该与日期选择器下面输出的内容完全相同。谁能解释我哪里出错了?

Date picker and correct date being outputted underneath:

日期选择器和下面输出的正确日期:

日期选择器显示在2个不同的日期

<div class="datepicker-container">
        <div class="date-from">
          From:
          <datepicker date-set="{{yesterday}}" selector="form-control" date-max-limit="{{today}}" class="date-picker">
            <div class="input-group">
              <input class="form-control" placeholder="Choose a date"/>
              <span class="input-group-addon" style="cursor: pointer">
                <i class="glyphicon glyphicon-calendar"></i>
              </span>
            </div>
          </datepicker>
        </div>
        <div class="date-too">
          To:
          <datepicker date-set="{{today}}" selector="form-control" date-min-limit="{{yesterday}}" class="date-picker">
            <div class="input-group">
              <input class="form-control" placeholder="Choose a date"/>
              <span class="input-group-addon" style="cursor: pointer">
                <i class="glyphicon glyphicon-calendar"></i>
              </span>
            </div>
          </datepicker>
        </div>
      </div>
      <h4>{{yesterday}} and {{today}}</h4>

Defining the date:

定义日期:

日期选择器显示在2个不同的日期

var currentDate = moment(new Date()).format("DD/MM/YYYY");
console.log("1", currentDate);

$scope.today = currentDate.toString();
console.log("2", $scope.today);

var yesterdaysDate = moment(new Date()).subtract(1, 'days').format("DD/MM/YYYY");
console.log("3", yesterdaysDate);

$scope.yesterday = yesterdaysDate.toString();
console.log("4", $scope.yesterday);

1 个解决方案

#1


0  

Solved it, I formatted the date with the date picker instead of moment.

解决了它,我用日期选择器而不是时刻格式化日期。

Date picker:

<div class="datepicker-container">
    <div class="date-from">
      From:
      <datepicker date-set="{{yesterday}}" date-format="dd/MM/yyyy" selector="form-control" date-max-limit="{{today}}" class="date-picker">
        <div class="input-group">
          <input class="form-control" placeholder="Choose a date"/>
          <span class="input-group-addon" style="cursor: pointer">
            <i class="glyphicon glyphicon-calendar"></i>
          </span>
        </div>
      </datepicker>
    </div>
    <div class="date-too">
      To:
      <datepicker date-set="{{today}}" date-format="dd/MM/yyyy" selector="form-control" date-min-limit="{{yesterday}}" class="date-picker">
        <div class="input-group">
          <input class="form-control" placeholder="Choose a date"/>
          <span class="input-group-addon" style="cursor: pointer">
            <i class="glyphicon glyphicon-calendar"></i>
          </span>
        </div>
      </datepicker>
    </div>
  </div>
  <h4>{{yesterday}} and {{today}}</h4>

Moment:

var currentDate = moment(new Date());
console.log("1", currentDate);

$scope.today = currentDate.toString();
console.log("2", $scope.today);

var yesterdaysDate = moment(new Date()).subtract(1, 'days');
console.log("3", yesterdaysDate);

$scope.yesterday = yesterdaysDate.toString();
console.log("4", $scope.yesterday);

#1


0  

Solved it, I formatted the date with the date picker instead of moment.

解决了它,我用日期选择器而不是时刻格式化日期。

Date picker:

<div class="datepicker-container">
    <div class="date-from">
      From:
      <datepicker date-set="{{yesterday}}" date-format="dd/MM/yyyy" selector="form-control" date-max-limit="{{today}}" class="date-picker">
        <div class="input-group">
          <input class="form-control" placeholder="Choose a date"/>
          <span class="input-group-addon" style="cursor: pointer">
            <i class="glyphicon glyphicon-calendar"></i>
          </span>
        </div>
      </datepicker>
    </div>
    <div class="date-too">
      To:
      <datepicker date-set="{{today}}" date-format="dd/MM/yyyy" selector="form-control" date-min-limit="{{yesterday}}" class="date-picker">
        <div class="input-group">
          <input class="form-control" placeholder="Choose a date"/>
          <span class="input-group-addon" style="cursor: pointer">
            <i class="glyphicon glyphicon-calendar"></i>
          </span>
        </div>
      </datepicker>
    </div>
  </div>
  <h4>{{yesterday}} and {{today}}</h4>

Moment:

var currentDate = moment(new Date());
console.log("1", currentDate);

$scope.today = currentDate.toString();
console.log("2", $scope.today);

var yesterdaysDate = moment(new Date()).subtract(1, 'days');
console.log("3", yesterdaysDate);

$scope.yesterday = yesterdaysDate.toString();
console.log("4", $scope.yesterday);