I'm trying to use http://www.daterangepicker.com/ with angularjs but I cannot get the value of ngModel updated. I have written the following directive but can anyone please tell me why scope.ngModel is always undefined?
angular.module('daterangepickerDirective', [])
.directive('daterangepicker', function() {
return {
restrict: 'A',
scope: {
ngModel: '='
},
link: function( scope, element, attrs ) {
console.log('scope.ngModel') // UNDEFINED. Why?
// Date range picker
element.daterangepicker({
locale: {
format: 'YYYY-MM-DD',
showDropdowns: true
},
ranges: {
'All Time': ['1900-01-01', moment()],
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}).on("apply.daterangepicker",function(event){
scope.$apply(function() {
scope.ngModel.$setViewValue(event.date);//This will update the model property bound to your ng-model whenever the datepicker's date changes.
});
});
}
}
});
My HTML is simply
<input type="text" daterangepicker class="form-control" ng-model="selected_filters.date" />
Many thanks.
Related
I have to use daterangepicker and I can't figure out how to fetch the selected date in jquery.
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
//fetch seleted date
var get_date = $('#reportrange').val()
console.log("reportrange selected date:", get_date)
You must retrieve the data object:
$('#reportrange').data('daterangepicker').startDate;
$('#reportrange').data('daterangepicker').endDate;
You can also use this
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({ opens: 'left' }, function(start, end, label) {
console.log("Your Select date range is: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
For more detail : https://www.daterangepicker.com/
You can use default callback function like this
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
},
function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + '
to ' + end.format('YYYY-MM-DD'));
});
});
$('#reportrange').data('daterangepicker').startDate;
$('#reportrange').data('daterangepicker').endDate;
I am using daterangepicker version: 3.0.3
I have a radio button pair that lets the user switch between local and utc time. When I click on the radio button I want to remove and re-attach the daterangepicker constructor so I can specify different pre-defined date ranges.
However, after clicking on the radio button the daterangepicker stops firing an event when I click "Apply" or click on a pre-defined date range.
I made a simplified version of my program on jsfiddle and the apply event is still not firing
https://jsfiddle.net/flexmcmurphy/re62qhb8/4/
Here is the code:
<html>
<head>
<title>Test2.html</title>
<script src="include/jquery-3.3.1.js"></script>
<script src="include/moment.js"></script>
<script src="include/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="include/daterangepicker.css" />
</head>
<body>
<input type="text" name="datetimes"/>
Local <input type="radio" name="timeformat" value="local" checked="checked"><span id="mybar">|</span><input type="radio" name="timeformat" value="utc"> UTC
<script>
// Global Variables
var selectedtimeformat;
// Set the selectedtimeformat variable on page load
$( document ).ready(function() {
setSelectedTimeFormat();
attachpicker();
});
$("input[type='radio']").click(function(){
var radioValue = $("input[name='timeformat']:checked").val();
if(radioValue != selectedtimeformat){
setSelectedTimeFormat();
if(selectedtimeformat == 'utc'){
$('input[name="datetimes"]').data('daterangepicker').remove();
attachpicker();
}else{
// Re-attach the DRP so the startDate, endDate, minDate and maxDate settings are updated for the UTC/local time choice
$('input[name="datetimes"]').data('daterangepicker').remove();
attachpicker();
}
}
}); // end function $("input[type='radio']").click(function(){...}
function setSelectedTimeFormat(){
selectedtimeformat = $("input[name='timeformat']:checked").val();
alert("selectedtimeformat: " + selectedtimeformat);
}
function attachpicker(){
if(selectedtimeformat == 'local'){
$('input[name="datetimes"]').daterangepicker({
"opens": 'right',
"drops": 'down',
"timePicker": true,
"locale": {
"format": 'MM/DD/YYYY'
},
"alwaysShowCalendars": true,
"ranges": {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
"startDate": "04/08/2019",
"endDate": "04/10/2019",
"minDate": "04/05/2019",
"maxDate": "04/18/2019",
"timePickerIncrement": 10,
"timePicker24Hour": true
}); // <-- end of daterangepicker() constructor
}else{
// selectedtimeformat == 'utc'
$('input[name="datetimes"]').daterangepicker({
"opens": 'right',
"drops": 'down',
"timePicker": true,
"locale": {
"format": 'MM/DD/YYYY'
},
"alwaysShowCalendars": true,
"ranges": {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
"startDate": "04/08/2019",
"endDate": "04/14/2019",
"minDate": "04/05/2019",
"maxDate": "04/18/2019",
"timePickerIncrement": 10,
"timePicker24Hour": true
}); // <-- end of daterangepicker() constructor
}
} //<-- end of function attachpicker()
$('input[name="datetimes"]').on('apply.daterangepicker', function(ev, picker) {
alert("apply.daterangepicker event fired");
});
</script>
</body>
</html>
Expected Result:
When I change the selected radio button and then select a pre-defined date range or click "apply" in the daterangepicker the apply.daterangepicker event should fire and an alert() popup should appear showing the event has fired.
i.e: the daterangepicker constructor should be removed and re-attached with new properties.
This should happen because my attachpicker() method is called when the radio button is changed.
Actual Result:
Instead when I change the selected radio button and then select a pre-defined date range or click "apply" in the daterangepicker I don't get the alert pop up showing that the apply event fired.
However...
When I change the selected Radio Button the startDate and endDate that appears in the textbox DOES update correctly.
With Local Radio Button selected:
"startDate": "04/08/2019"
"endDate": "04/10/2019"
UTC Radio Button selected:
"startDate": "04/08/2019"
"endDate": "04/14/2019"
So this tells me the daterangepicker constructor does get re-attached with new properties just that the apply event stops firing.
Why is that?
The remove() function you're calling removes any event listeners for the date range picker you're destroying.
Move your apply.daterangepicker listener creation into the attachpicker() function.
My problem is I want to execute different functions on different dates. All my function execution depends on the dates which we select. For example, if I select last 7 days in my code it should execute a different function and if I select last one month it should execute another function. But when I click on apply I am able to execute only one function. I have tried lots of chunks of code but I could not find the answer. please help me out
$(function() {
var start = moment().subtract(6, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
minDate: moment().subtract(365, 'days'),
maxDate:moment(),
ranges: {
'Today': [moment(), moment(),],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days'),],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
},
},
cb)
cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function() {
addtoday();
addyesterday();
presentmonth1();
last30days();
anydate();
});
</script>
If I want to write an if else for the moment() how should it be done. When I click on different date ranges I have to execute or trigger different functions
As you are using daterangepicker, the parameters of apply.daterangepicker event's second parameter has information regarding the chosen option based on which, you can call you desired function. See below:
$(function () {
var start = moment().subtract(6, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
minDate: moment().subtract(365, 'days'),
maxDate: moment(),
ranges: {
'Today': [moment(), moment(),],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days'),],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
},
},
cb)
cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function (ev, picker) {
if (picker.chosenLabel == "Today") {
addtoday();
}
else if (picker.chosenLabel == "Yesterday") {
addyesterday();
}
else if (picker.chosenLabel == "Last 7 Days") {
}
else if (picker.chosenLabel == "Last 30 Days") {
last30days();
}
else if (picker.chosenLabel == "This Month") {
presentmonth1();
}
else if (picker.chosenLabel == "Last Month") {
}
else if (picker.chosenLabel == "Custom Range") {
}
});
I have a Kendo daterangepicker defined like this:
$('#range').daterangepicker(
{
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
startDate: moment().subtract('days', 29),
endDate: moment()
},
function(start, end) {
$('#startDate').val(start.format('M/D/YYYY'));
$('#endDate').val(end.format('M/D/YYYY'));
refreshFileList();
}
).prev().on("click", function() {
$(this).next().focus();
});
How can I change "Today", "Yesterday", etc to be values read in from a variable rather than hard coded in the Javascript. For example:
var oneMonth = "One Month";
$('#range').daterangepicker(
{
ranges: {
oneMonth : [moment().subtract('month', 1), moment()],
threeMonths: [moment().subtract('month', 3), moment()],
sixMonths: [moment().subtract('month', 6), moment()],
allMonths: [moment().subtract('year', 15), moment()]
},
startDate: moment().subtract('month', 3),
endDate: moment()
},
function (start, end) {
$('#startDate').val(start.format('M/D/YYYY'));
$('#endDate').val(end.format('M/D/YYYY'));
refreshThumbnails();
}).prev().on("click", function () {
$(this).next().focus();
});
When I do like above, instead of displaying the value of oneMonth ("One Month"), it displays the variable name ("oneMonth") in the date range picker.
For dynamic property names based on a variable value, you will use bracket notation.
Create a data object prior to the range specification. Use object bracket notation to add a dynamic property name to the object. Use the object for the property of the ranges option.
oneMonthLabel = "One Month";
myranges = {};
myranges[oneMonthLabel] = [moment().subtract('month', 1), moment()];
$('#range').daterangepicker(
...
ranges: myRanges,
If you don't need to set the property based on a variable just use a quoted property name.
ranges: {
"One month" : [moment().subtract('month', 1), moment()],
"3 months": [moment().subtract('month', 3), moment()],
"6 months": [moment().subtract('month', 6), moment()],
"All months": [moment().subtract('year', 15), moment()]
},
I am using morris chart using http://morrisjs.github.io/morris.js/bars.html
one of the key problem i am facing is on add an option so that end user can filter data via data range or like say today or last one month etc.
That way the chart will be way more interactive and useful.
what would be the option to do that. i am using startBootStrap template which contains libraries for morris charts.
i used http://www.daterangepicker.com/#ex4 and linked it to my rest call to filter data
here is the brief code
function cb(start, end) {
$('#reportrange span').html(start.format('MMM D, YYYY') + ' - ' + end.format('MMM D, YYYY'));
//alert(start.format('MMM D, YYYY'));
$.ajax({ url: 'http://127.0.0.1:7101/MUDRESTService/rest/v1/msessionchart?onlyData=true&fields=Sessionlength,Sessiontime&limit=10',
type: 'get',
dataType: 'json',
success: function(output) {
console.log(output) ;
var ddata = JSON.stringify(output.items);
console.log('vik says');
console.log(ddata);
var arr = JSON.parse(ddata);
bar.setData(arr);
}
});
}
cb(moment().subtract(29, 'days'), moment());
$('#reportrange').daterangepicker({
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);