Question

这是我使用的代码。但它不能按我的意愿工作。我已经阅读了很多关于stackoverflow的问题，尝试了一些例子，但仍然坚持为什么这不会起作用。所以我问社区。

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function ($scope) {
    today = new Date()


    $scope.campaign = {
        start_at: new Date(),
        end_at: today.setDate(today.getDate() + 10)
    };


}).directive("startDateCalendar", [
  function () {
      return function (scope, element, attrs) {

          scope.$watch("campaign.end_at", (function (newValue, oldValue) {
              element.datepicker("option", "maxDate", newValue);
          }), true);


          return element.datepicker({
              dateFormat: "yy-mm-dd",
              numberOfMonths: 2,
              minDate: new Date(),
              maxDate: scope.campaign.end_at,
              beforeShowDay: $.datepicker.noWeekends,
              onSelect: function (date) {
                  scope.campaign.start_at = date;
                  scope.$apply();
              }
          });
      };
  }

]).directive("endDateCalendar", [
  function () {
      return function (scope, element, attrs) {
          scope.$watch("campaign.start_at", (function (newValue, oldValue) {
              element.datepicker("option", "minDate", newValue);
          }), true);

          return element.datepicker({
              dateFormat: "yy-mm-dd",
              numberOfMonths: 2,
              minDate: scope.campaign.start_at,
              defaultDate: scope.campaign.end_at,
              beforeShowDay: $.datepicker.noWeekends,
              onSelect: function (date) {
                  scope.campaign.end_at = date;
                  return scope.$apply();
              }
          });
      };
  }

]);

＆＃13;

@{
    ViewBag.Title = "Contact";
}


<meta charset="utf-8">
<!--  jQuery -->
<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
<link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

<!-- Bootstrap Date-Picker Plugin -->
<link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
@*<script>document.write('<base href="' + document.location + '" />');</script>*@
<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js" data-require="angular.js@1.2.x"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="~/Scripts/app.js"></script>



<body ng-controller="MainCtrl" ng-app="plunker">
    <br />
    <br />
    <div class="row">
        <div class="col-xs-6">
            <input type="text" start-date-calendar="" ng-model="campaign.start_at" placeholder="Start Date" class="form-control" />
        </div>
        <div class="col-xs-6">
            <input type="text" end-date-calendar="" ng-model="campaign.end_at" placeholder="End Date" class="form-control" />
        </div>
    </div>

   
    
   
</body>
@Scripts.Render("~/bundles/jquery")

＆＃13;

但点击文本框时没有出现日期选择卡。请有人给我解决方案。这似乎是大多数教程的风格，但似乎不起作用

Datepicker不使用mvc

0 个答案: