JSFiddle - React, Tailwind, and code Playground

by LittleLebowski

HTML

<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://raw.github.com/dangrossman/bootstrap-daterangepicker/master/daterangepicker.js"></script>
<script src="https://raw.github.com/dangrossman/bootstrap-daterangepicker/master/date.js"></script>
<link rel="stylesheet" href="https://raw.github.com/dangrossman/bootstrap-daterangepicker/master/daterangepicker.css">
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.min.js"></script>
<script src="https://raw.github.com/ivaynberg/select2/master/select2.js"></script>
<link rel="stylesheet" href="https://raw.github.com/ivaynberg/select2/master/select2.css">
<div ng-app="feedback-app" ng-controller="DashboardController">
    <!-- Date Range Picker -->
    <div id="reportrange" class="reportrange" my-date-picker="changeDate($startDate, $endDate)"> <span></span> 
    </div>
    <!--/Date Range Picker -->
    <!-- AngularUI Select2 -->
    <select ui-select2 ng-model="selectedQuestion" style="width:50%">
            <option value="1">Text1</option>
            <option value="1">Text2</option>
            <option value="1">Text3</option>
    </select>
    <!--/AngularUI Select2 -->
</div>

JavaScript

var mod = angular.module('feedback-app', ['ui']);

/* Custom Directive for Date Range Picker */
mod.directive('myDatePicker', function ($timeout) {
	return {
		restrict: 'A',
		link: function (scope, element, attr) {
			$(element).daterangepicker({
				ranges: {
					'Today': ['today', 'today'],
					'Yesterday': ['yesterday', 'yesterday'],
					'Last 7 Days': [Date.today().add({ days: -6 }), 'today'],
					'Last 30 Days': [Date.today().add({ days: -29 }), 'today'],
					'This Month': [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()],
					'Last Month': [Date.today().moveToFirstDayOfMonth().add({ months: -1 }), Date.today().moveToFirstDayOfMonth().add({ days: -1 })]
				},
				opens: 'left',
				format: 'dd/MM/yyyy',
				separator: ' to ',
				startDate: Date.today().add({ days: -29 }),
				endDate: Date.today(),
				minDate: '01/01/2013',
				maxDate: Date.today(),
				locale: {
					applyLabel: 'Submit',
					fromLabel: 'From',
					toLabel: 'To',
					customRangeLabel: 'Custom Range',
					daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
					monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
					firstDay: 1
				},
				showWeekNumbers: true,
				buttonClasses: ['btn-danger']

			}, function (startDate, endDate) {
				$('#reportrange span').html(startDate.toString('MMMM d, yyyy') + ' - ' + endDate.toString('MMMM d, yyyy'));

				var fStartDate =  moment(startDate).format('YYYY-MM-DD');
				var fEndDate = moment(endDate).add('days', 1).format('YYYY-MM-DD'); 
				scope.$eval(attr.myDatePicker, {$startDate: fStartDate, $endDate: fEndDate});

			});

			var inEndDate = Date.today();
			var inStartDate = Date.today().add({ days: -29 });
			//Set the initial state of the picker label
			$('#reportrange span').html(inStartDate.toString('MMMM d, yyyy') + ' - ' + inEndDate.toString('MMMM d, yyyy'));
		}
	};
});