如何在加载视图时将日期设置为占位符

How to set the date as a placeholder when view loads?

本文关键字：日期 设置 占位符 加载 视图      更新时间：2023-09-26

我正在使用Angular插件，它实际上是这个扩展当视图加载时，您看到的只是一个空输入，当您单击该输入时，日历会出现，并且今天的日期会显示在该输入中

当视图准备好时，我需要在输入中加载今天的日期

这是我使用它的方式

<input type='text' datetimepicker
       datetimepicker-options="{format: 'MM/DD/YYYY', useCurrent: true}"/>

你推荐什么

编辑

我在输入中添加了autofocus，并显示了它的日期选择器，而不仅仅是我需要的日期

我的控制器：

(function () {
  'use strict';
  angular
    .module('palpatine')
    .controller('RotationsCtrl', RotationsCtrl);
  /* @ngInject */
  function RotationsCtrl (Rotations, $scope, $rootScope, $state) {
    /*jshint validthis: true */
    var vm = this;
    activate();
    function activate () {
      $(document).ready(function () {
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();
        if(dd<10) {
            dd='0'+dd
        }
        if(mm<10) {
            mm='0'+mm
        }
        today = mm+'/'+dd+'/'+yyyy;
        $scope.today = moment().format("MM/DD/YYYY");
        console.log(today);
        $scope.datetimepickerOptions = {
          format: 'MM/DD/YYYY',
          defaultDate: today
        };

      });
    }
  }
})();

只需将defaultDate设置为当前日期。这将覆盖useCurrent，因此不再需要它。

在控制器中

$scope.datetimepickerOptions = {
    format: 'MM/DD/YYYY', 
    defaultDate: new Date()
};

HTML

<input type='text' 
       datetimepicker
       datetimepicker-options="{{datetimepickerOptions}}"/>

编辑

事实证明，dioney/angular bootstrap datetimepicker指令在0.1.3版本中存在defaultDate错误。解决方案是将其更新为主分支。

bower.json

"angular-bootstrap-datetimepicker-directive": "#master"

并运行

bower update

将焦点放在文本输入上，然后将其模糊…

 angular.element('.your_input_class_name').trigger('focus');
 angular.element('.your_input_class_name').trigger('blur');

或

 document.getElementById('your_input_id').focus();
 document.getElementById('your_input_id').blur();

你能试试这个代码吗？

参考

<input type='text' 
       datetimepicker
       datetimepicker-options="{format: 'MM/DD/YYYY', defaultDate: '01/01/2016'}"/>

编辑

在看到更新后的问题时，我可以注意到模块中没有加载datetimepicker模块。按照下面给出的方式注入模块

angular
  .module('palpatine', [
    // Other injected modules.
    'datetimepicker'
  ]);

如果你只是在寻找一个占位符作为当前日期。在输入中添加占位符属性，并使用today作为值。

相关文章：