日期选择器和角度

时间:2015-07-08 16:14:33

标签: jquery angularjs

我在datetime输入字段中使用datetimepicker。这些输入字段也有ng-model

示例:

<input id="period-start" type="datetime" ng-model="periodStart">
<script>$('#period-start').datetimepicker()</script>

当我选择日期时,模型不会改变。 我该怎么做才能让它发挥作用?

2 个答案:

答案 0 :(得分:0)

Angular在与DOM选择器匹配的UI元素上没有绑定。您需要将代码包装在directive上。

以下是使用Angular UI datepicker的示例和使用jQuery UI

的另一个示例

第二个例子很容易理解:

gem install

在你看来:

root@stage:/var/lib/tomcat6/webapps/activiti-explorer/WEB-INF/lib# java -jar jruby-complete-1.7.21.jar -S gem install faraday
ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the file:/var/lib/tomcat6/webapps/activiti-explorer/WEB-INF/lib/jruby-complete-1.7.21.jar!/META-INF/jruby.home/lib/ruby/gems/shared directory.

答案 1 :(得分:0)

我不想替换引导日期时间选择器,所以受到西奥多答案的启发,我写了自己的指令,并将其挂钩。&#34;

export function dateTimePickerDirective() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attributes, ctrl) {
      var format = $(element).data('format') || 'YYYY-MM-DD hh:mm';

      var picker = element.datetimepicker({
        format: format,
        locale: 'sv'
      })

      element.on('dp.change', function (event) {
        scope.$apply(function () {
          var date = new Date(event.date.toString());
          ctrl.$setViewValue(date);
        });
      });

      ctrl.$formatters.push(function (value) {
        var date = moment(value);
        if (date.isValid()) {
          return date.format(format);
        }

        return '';
      });
    }
  };
}

像魅力一样!