RS Date Range Picker

---

Installation

• Download this angular module and its dependencies, using bower.json (see below "Include dependency in bower.json"), and run bower install aftwards.

• If installing in an app like RSM2, the script/bootstrap should do everything you need. The rs-daterange-picker repo will be in your app's bower_components folder. bower install should work fine if all you need is an update to one of the DNA modules.

• Include dependency in bower.json - use the most recent version tag if possible for your app.

{
  ...
  "dependencies": {
    "angular": "1.2.16",
    "moment": "2.8.0",
    "moment-range": "1.0.1",
    "jquery": "~2.2.3",
    "lodash": "2.2.1"
    "rs-daterange-picker": "ssh://[e-mail]/dna/rs-daterange-picker.git#v0.0.1"
  }
}

• Ensure that angularjs, jquery, moment, lodash, and rs-daterange-picker, are included on your page. In RSM2, this would be the app/index.html file:

<!-- css -->
<link rel="stylesheet" href="/bower_components/rs-daterange-picker/dist/rs-daterange-picker.css" />
<!-- in your index.html file -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/moment/min/moment-with-locales.min.js"></script>
<script src="/bower_components/lodash/dist/lodash.min.js"></script>
<!-- ... -->
<script src="/bower_components/rs-daterange-picker/dist/rs-daterange-picker.js"></script>

---

Configuration

var myApp = angular.module('awesomeRsApp', ['dna.rsDateRangePicker']);

---

Usage

To see the working implementation, make sure to run bower install && npm install.

Then run http-server, and go to http://localhost:8081/docs/. Port may differ slightly depending on what else is running, like 8082

<div rs-date-range-picker
     initial-range="defaultRange"
     range-options="rangeOptions"
     left-calendar-title="leftCalendarTitle"
     right-calendar-title="rightCalendarTitle"
     min-date="earliestDateForRange"
     max-date="maxDate"></div>

angular.module('docsRsDateRangePicker', ['dna.rsDateRangePicker']);
angular.module('docsRsDateRangePicker').controller('testScreen', [
  '$scope',
  function(
    $scope
  ) {
 
    var orgCreatedDate = undefined;
    $scope.earliestDateForRange = moment(orgCreatedDate || ['2013', '3', '1']); // an array to init a moment object - month is base 0
    $scope.maxDate = moment().subtract(1, 'days'); // a moment object
    $scope.defaultRange = 'yesterday'; // should match a {value:} in the $scope.rangeOptions below
    $scope.rangeOptions = [
      {name: 'Yesterday', formula: [moment().subtract(1, 'days'), moment().subtract(1, 'days')], value:'yesterday' },
      {name: 'Last 7 Days', formula: [moment().subtract(8, 'days'), moment().subtract(1, 'days')], value: 'week' },
      {name: 'Last Month', formula: [moment().subtract(1, 'months').subtract(1, 'days'), moment().subtract(1, 'days')], value: 'month' },
      {name: 'All Time', formula: [$scope.earliestDateForRange, moment().subtract(1, 'days')], value: 'alltime' },
      {name: 'Custom Range', formula: [], value:'custom' }
    ];
    $scope.leftCalendarTitle = undefined; // example 'Start: '
    $scope.rightCalendarTitle = undefined; // example 'End: '
    $scope.datepickerApplyButton = 'Apply';
    $scope.datepickerCancelButton = 'Cancel';
  }
]);

---

Local Development

Sync up your development, so you can develop locally.

In /rs-daterange-picker run bower link.

In the project you want to work in locally, such as /admin-tools, run bower link rs-daterange-picker

In /rs-daterange-picker run grunt watch. This will watch the changes you make locally and update the bower_components/rs-datarange-picker automattically.

---

TDD Development

Write unit tests in spec/rs-daterange-picker-test.js and run grunt test (runs both jshint and jasmine).

Add new files needed for testing in grunt/jasmine.js to the src array. These include 3rd party dependencies used in the module, such as angular, lodash, etc.

There is an attempt to support both sass and scss in this repo, so the dev can choose which to write. If you like scss, then run grunt watch (more explicit: grunt watch -compiledirection=scss2sass) and edit the scss files and you will see your changes reflected in the src/sass/*.sass files. If you like to write sass run grunt watch -compiledirection=sass2scss and edit the .sass files and you'll see your changes reflected in the src/scss folder.

---

Releasing

Critical Setup: Make sure you ran git push --set-upstream origin master at some point so that grunt release knows your "upstream" repo and branch. The branch can be modified with this for pull requests.

Run: To create a release run grunt release. This bumps the version number in package.json and bower.json. To test any changes to the release config you can use grunt release --dry-run.

Then go to the bower.json in the app you would like to add the latest release to and add the new version number at the end. (e.g. .../rs-daterange-picker.git#0.0.2" --> .../rs-daterange-picker.git#0.0.3").

---

Common Questions

The "clonable" repo for making dna modules puts empty .keep files into the dist, spec, src, and tasks folder to keep them in version control across systems. (SO on this practice).