1

this is the code i used.but it not working as i wish. I've read a lot of the questions on stackoverflow about this, tried some examples and am still stuck why this won't work. So I am asking the community. 

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();
              }
          });
      };
  }

]);
@{
    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")

but there are no datepicker appear when click the textbox.can anyone give me a solution please. This seems to be the flavor of most of the tutorials on this, but don't seem to work

harsha rachith
  • 93
  • 1
  • 8

0 Answers0