【问题标题】:How to use jQuery datepicker in AngularJS如何在 AngularJS 中使用 jQuery 日期选择器
【发布时间】:2019-11-28 11:40:48
【问题描述】:

如何检查 Web API 是否应从后端提供数据以供 angularjs 中的选择选项使用?

如何在angularjs中使用这个函数?

$(document).ready(function() {
    $('#startDate').datepicker({ format: 'yyyy-mm-dd'   });
    $('#endDate').datepicker({ format: 'yyyy-mm-dd'   });
});

【问题讨论】:

  • 这是一个“为我编写代码”的问题吗?你为解决问题做了哪些努力?你有什么问题?
  • 把它放在一个指令中或找到一个角度日期选择器模块document.ready在角度应用程序中几乎没用
  • 能否请您以代码的方式写下来。

标签: javascript jquery angularjs datepicker


【解决方案1】:

$(function() {
  $('#startDate').datepicker({
    format: 'yyyy-mm-dd'
  });
  $('#endDate').datepicker({
    format: 'yyyy-mm-dd'
  });
});
angular.module("date", [])
  .directive("datepicker", function() {
    return {
      restrict: "A",
      link: function(scope, el, attr) {
        el.datepicker({
          dateFormat: 'yyyy-mm-dd'
        });
      }
    };
  })
  .controller("dateCtrl", function($scope) {});
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app="date">
  <div ng-controller="dateCtrl">
    <!-- Jquery -->
    <label>Jquery Date picker :-</label><br><br> Start Date:<input type="text" id="startDate" name="startDate" ng-model="startDate">
    <span>{{startDate}}</span><br> End Date:<input type="text" id="endDate" name="endDate" ng-model="endDate">
    <span>{{endDate}}</span><br><br>
    <!-- Angularjs -->
    <label>Angularjs  Date picker :-</label><br><br> Start Date:<input type="text" datepicker ng-model="_startDate" />
    <span>{{_startDate}}</span><br> End Date:<input type="text" datepicker ng-model="_endDate" />
    <span>{{_endDate}}</span><br>
  </div>
</div>

请注意,为了您更好地理解,我添加了 jquery 和 Angularjs 脚本。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-01-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-11
    相关资源
    最近更新 更多