rs-daterange-picker v0.0.42
RS Date Range Picker
Installation
- Download this angular module and its dependencies, using
bower.json
(see below "Include dependency inbower.json
"), and runbower install
aftwards. If installing in an app like RSM2, the
script/bootstrap
should do everything you need. Thers-daterange-picker
repo will be in your app'sbower_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://git@stash.trstone.com/dna/rs-daterange-picker.git#v0.0.1"
}
}
- Ensure that
angularjs
,jquery
,moment
,lodash
, andrs-daterange-picker
, are included on your page. In RSM2, this would be theapp/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).
5 years ago