时间戳

首页 > 解决方案 > 如何在 AngularJS 中使用 jQuery 日期选择器

javascript - 如何在 AngularJS 中使用 jQuery 日期选择器

问题描述

如何检查Web API应该从后端提供数据以供angularjs中的选择选项？

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

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

标签： javascriptjqueryangularjsdatepicker

解决方案

$(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 脚本以便您更好地理解。

推荐阅读