【问题标题】:How to set default date using angular-bootstrap-datetimepicker?如何使用 angular-bootstrap-datetimepicker 设置默认日期?
【发布时间】:2017-03-23 19:48:41
【问题描述】:

我正在使用 angular-bootstrap-datetimepicker 模块让用户选择日期和时间,如何在视图呈现时添加默认日期和时间?我们是否有任何属性可以设置 booleab 值或任何其他更好的方法?

main.html

<div class="dropdown form-group">
    <!-- <label>Start Date</label> -->
    <a class="dropdown-toggle" id="dropdownStart" role="button" data-toggle="dropdown">
        <div class="input-group date">
            <input type="text" class="form-control" data-ng-model="dateRangeStart" placeholder=" Search Start Date">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <datetimepicker data-ng-model="dateRangeStart" data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed' }" data-on-set-time="startDateOnSetTime()" data-before-render="startDateBeforeRender($dates)"></datetimepicker>
    </ul>
</div>

Ctrl.js

    $scope.endDateBeforeRender = endDateBeforeRender
        $scope.endDateOnSetTime = endDateOnSetTime
        $scope.startDateBeforeRender = startDateBeforeRender
        $scope.startDateOnSetTime = startDateOnSetTime

        function startDateOnSetTime () {
          $scope.$broadcast('start-date-changed');
        }

        function endDateOnSetTime () {
          $scope.$broadcast('end-date-changed');
        }

        function startDateBeforeRender ($dates) {
          if ($scope.dateRangeEnd) {
            var activeDate = moment($scope.dateRangeEnd);

            $dates.filter(function (date) {
                $scope.searchObj.endDate = activeDate._i;
                // console.log(activeDate);
              return date.localDateValue() >= activeDate.valueOf()
            }).forEach(function (date) {
              date.selectable = false;
              // console.log(date);
            })
          }
        }

function endDateBeforeRender ($view, $dates) {
      if ($scope.dateRangeStart) {
        var activeDate = moment($scope.dateRangeStart).subtract(1, $view).add(1, 'minute');

        $dates.filter(function (date) {
            $scope.searchObj.startDate = activeDate._i;
            // console.log(activeDate._i);
          return date.localDateValue() <= activeDate.valueOf()
        }).forEach(function (date) {
          date.selectable = false;
          // console.log(date);
        })
      }
    }

【问题讨论】:

    标签: javascript angularjs twitter-bootstrap


    【解决方案1】:

    您应该能够将data-ng-model 属性设置为默认值:

    <datetimepicker data-ng-model="dateRangeStart"></datetimepicker>
    

    在你的控制器中给dateRangeStart一个默认值:

    $scope.dateRangeStart = new Date();
    

    【讨论】:

    • 我如何指定是否要开始日期和时间让我们说上午 1:00 到晚上 11:55?有可能吗?
    • 你可以在 JavaScript Date 对象中指定你想要的时间。我认为不可能指定多次。
    • 你说的多次是什么意思?
    • 我不确定该属性是否可以接受时间范围。您必须阅读文档以确定这是否可行。
    猜你喜欢
    • 2014-02-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-03
    相关资源
    最近更新 更多