I kind of messed up the logic of my code, and I can't figure out how to fix it. I have a Bootstrap navtab panel that when the tabs are clicked, based on which tab is clicked it runs an MVC C# function in my controller. I actually need this to happen on a button click. SO the user enters a date into the datepicker, clicks submit, and then based on which tab is selected, a function will be run. How can I do this on a button click?
Here is my datepicker and button:
<div class="row spiff-datepicksection">
<div class="col-lg-6 pull-right">
<div class="col-sm-5 col-lg-offset-4">
<div class="form-group">
<div class="input-group date">
<input id="startDate" type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-3">
<input class="spiffdate-btn" type="submit" value="Submit" />
</div>
</div>
</div>
Here is my javascript:
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var wrongid = $('.tab-content .active').attr('id');
$('a[data-toggle="tab"]').removeClass("active");
$(this).addClass("active");
var correctid = $(this).data("id");
alert($('.tab-content .active')[0].outerHTML);
var startDate = $('#startDate').val();
if (correctid == "delayedspiff")
$.get("#Url.Action("DelayedSpiffDate", "Dashboard")", { startDate: startDate });
else
$.get("#Url.Action("InstantSpiffDate", "Dashboard")", { startDate: startDate });
});
</script>
And here is my controller if it is needed:
public ActionResult DelayedSpiffDate(DateTime startDate)
{
var available = _appService.GetFeatureStatus(1, "spiffDashboard");
if (!available)
return RedirectToAction("DatabaseDown", "Error", new { area = "" });
var acctId = User.AccountID;
//startDate = DateTime.Today.AddDays(-6); // -6
var endDate = DateTime.Today.AddDays(1); // 1
Dictionary<DateTime, List<SpiffSummaryModel>> dict = new Dictionary<DateTime, List<SpiffSummaryModel>>();
try
{
var properties = new Dictionary<string, string>
{
{ "Type", "DelayedSpiff" }
};
telemetry.TrackEvent("Dashboard", properties);
dict = _reportingService.GetDailyDelayedSpiffSummaries(acctId, startDate, endDate);
}
catch (Exception e)
{
if (e.InnerException is SqlException && e.InnerException.Message.StartsWith("Timeout expired"))
{
throw new TimeoutException("Database connection timeout");
}
var error = _errorCodeMethods.GetErrorModelByTcError(PROJID.ToString("000") + PROCID.ToString("00") + "001", "Exception Getting DelayedSpiff Dashboard View", PROJID, PROCID);
error.ErrorTrace = e.ToString();
_errorLogMethods.LogError(error);
return RedirectToAction("index", "error", new { error = error.MaskMessage });
}
var spiffDateModels = new List<DelayedSpiffDateModel>();
foreach (var entry in dict)
{
var spiffDateModel = new DelayedSpiffDateModel();
spiffDateModel.Date = entry.Key;
spiffDateModel.Carriers = new List<DelayedSpiffCarrierModel>();
foreach (var item in entry.Value)
{
var spiffCarrierModel = new DelayedSpiffCarrierModel();
spiffCarrierModel.Carrier = item.CarrierName;
spiffCarrierModel.CarrierId = item.CarrierId;
spiffCarrierModel.ApprovedSpiffTotal = item.ApprovedSpiffTotal;
spiffCarrierModel.EligibleActivationCount = item.EligibleActivationCount;
spiffCarrierModel.IneligibleActivationCount = item.IneligibleActivationCount;
spiffCarrierModel.PotentialSpiffTotal = item.PotentialSpiffTotal;
spiffCarrierModel.SubmittedActivationCount = item.SubmittedActivationCount;
spiffCarrierModel.UnpaidSpiffTotal = item.UnpaidSpiffTotal;
spiffDateModel.Carriers.Add(spiffCarrierModel);
}
spiffDateModels.Add(spiffDateModel);
}
spiffDateModels = spiffDateModels.OrderByDescending(x => x.Date).ToList();
return PartialView(spiffDateModels);
}
Any ideas on how to make this happen on a button click?
You can try to create a handler of the 'click' event, which should retrieve a valid identifier of the selected tab and send a GET request to the server.
$(".spiffdate-btn").click(function(){
var correctid = $(".tab-content .active").attr("id");
var startDate = $("#startDate").val();
if (correctid == "delayedspiff")
$.get("#Url.Action("DelayedSpiffDate", "Dashboard")", { startDate: startDate });
else
$.get("#Url.Action("InstantSpiffDate", "Dashboard")", { startDate: startDate });
});
I realize this is an old question, but I am struggling with a similar issue so I am looking at old questions.
I think I see your problem though:
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
Your script calls "on shown".
If you do not want it running when it is shown, change it to "on click".
How? I can't help you with that yet. My javascript isn't that good.
Related
I have a view named Index, and 2 partial views _Grid and _Project.
The partialview _Project is a pop-up which is visible once the user clicks on the button to add data, think of it like adding a user.
Now, I am trying to change a textbox value which is inside the partial view _Grid once the user click on the button inside the _Project pop-up.
Inside the _Grid partialview:
<input id="CurrentOrder" type="hidden" value=""/>
In javascript once the button inside the pop-up(partialview _Project) is pressed:
function AddTimeReg() {
//code
if (date && shopdoc && ((convertedStartTime && convertedEndTime) || hours)) {
$.ajax({
// more code
// change the value of textbox
$("#Grid #CurrentOrder").val(salesorder);
The input type is inside the Grid partialview in a div named Grid.
What exactly am I doing wrong here?
I want the textbox have the value of salesorder.
Edit: For the one who wants the entire code:
Javascript File:
function AddTimeReg() {
var salesorder = $("#SalesOrder").val();
var shopdoc = $("#Shopdoc").val().trim();
var starttime = $("#StartTime").val().trim()
var convertedStartTime = starttime.replace(/\./g, ':')
var endtime = $("#EndTime").val().trim()
var convertedEndTime = endtime.split('.').join(':');
var hours = Math.round(Number($("#Hours").val().trim().replace(DecimalSeparator(), '.')) * 100 / 100);
var date = $("#Date").val().trim();
var info = $("#Info").val().trim();
var timeRegLineNr = 0;
var isEditing = $("#Project #Date").prop('disabled');
if (isEditing) {
timeRegLineNr = $($(".highlight")[0]).children(".td-TimeRegLineNr").text();
}
if (date && shopdoc && ((convertedStartTime && convertedEndTime) || hours)) {
$.ajax({
type: 'post',
url: appPath + '/TimeReg/ShopDoc',
data: {
regDate: date, salesOrder: salesorder, shopDoc: shopdoc, startTime: convertedStartTime, endTime: convertedEndTime,
hours: hours, info: info, timeRegLineNr: timeRegLineNr
},
success: function (response) {
if (response.success) {
var mySessionVariable = shopdoc
ClosePopup();
ShowGrid();
$("#Grid #CurrentOrder").val(salesorder);
var timerId = setTimeout(function () {
$("#dialog #TimerId").val("");
$("#dialog").modal("hide");
}, timeToClose);
$("#dialog #TimerId").val(timerId);
}
$("#dialog .modal-body").html(response.message);
$("#dialog #dialog-title").html(response.title);
$("#dialog").modal("show");
},
error: function (response) {
$("#dialog .modal-body").html(msgErrorDuringRequest);
$("#dialog #dialog-title").html(errorTitle);
$("#dialog").modal("show");
}
});
}
}
Inside Index:
<div id="Main" style="#mainDisplay">
<div style="margin:10px;">
<input id="regDate" type="#regDateType" value="#DateTime.Now.ToShortDateString()" />
<input type="button" class="btn btn-default" value="#Resources.Ok" onclick="ShowGrid()">
</div>
<div id="Grid">
#if ((bool)ViewBag.ShowGrid)
{
Html.RenderAction("Grid", new { login = (string)ViewBag.Login, regDate = DateTime.Now });
}
Inside the _Grid partialview there is the textbox:
<input id="CurrentOrder" type="hidden" value=""/>
And inside the Project partial view there is a button which calls the javascript Action
You have two partial.Call first partial then if call other partial, you might use ajax call.
I have angularjs app with a form that has a dropdownlist and and a datetimepicker.
When I change the dropdownlist I want to update the date displayed in the datepicker.
I get the following error when I change selected item in the dropdownlist
TypeError: Cannot read property 'apply' of undefined
at HTMLInputElement.<anonymous> (bootstrap-datetimepicker.min.js:2)
at Function.each (jquery-3.1.1.min.js:2)
at r.fn.init.each (jquery-3.1.1.min.js:2)
at r.fn.init.a.fn.datetimepicker (bootstrap-datetimepicker.min.js:2)
at m.$scope.SymbolChanged (moduleConfigformController.js:29)
at fn (eval at compile (angular.js:15197), <anonymous>:4:159)
at m.$eval (angular.js:18017)
at angular.js:25775
at Object.<anonymous> (angular.js:28600)
at q (angular.js:357)
This is the offending line of code:
$("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));
Here is my controller:
mainApp2.controller("moduleConfigformController",
function moduleConfigformController($scope, moduleConfigformService, $uibModalInstance) {
$scope.close = function (e) {
$uibModalInstance.dismiss();
e.stopPropagation();
};
$scope.formDebug = "loaded";
var settingsPromise = moduleConfigformService.simulationsettings();
settingsPromise.then(function (settings) {
$scope.simulationsettings = settings;
$scope.symbols = $scope.simulationsettings.symbols;
$scope.intervals = $scope.simulationsettings.intervals;
}).catch(function (error) {
throw error;
});
$scope.SymbolChanged = function () {
console.log("Symbol ddl changed");
console.log("New value is " + $scope.simulationsettings.Symbol);
// hardcoded date
// TODO: Find StartDate and EndDate where Symbol = $scope.simulationsettings.Symbol
$scope.simulationsettings.StartDate = "24/12/2014 8:26 PM";
// Display the new date in the datetimepicker
// This line produced the TypeError
$("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));
console.log("startdate is " + $scope.simulationsettings.StartDate);
console.log("startdate is " + $scope.simulationsettings.EndDate);
}
$scope.submitConfigForm = function () {
console.log("configform submitted");
var startDate = $scope.simulationsettings.StartDate;
var endDate = $scope.simulationsettings.EndDate;
var symbol = $scope.simulationsettings.Symbol;
var interval = $scope.simulationsettings.Intervals;
$scope.formDebug = "StartDate: " + startDate + " EndDate: " + endDate + " Symbol: " + symbol + " Interval: " + interval;
}
});
Here is my form:
<form name="configForm" ng-submit="submitConfigForm()">
<div class="modal-header" style="text-align:center">
<h3 class="modal-title">Configure</h3>
<div style="margin-top:10px">
<button tabindex="100" class="btn btn-success pull-left" type="submit" ng-class="{'btn-primary':configForm.$valid}">Start analysis</button>
<button class="btn btn-warning pull-right" ng-click="close($event)">Close</button>
</div>
</div>
<div class="modal-body">
<div class="col-sm-6" style="width: 100%;">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3">Symbol</label>
<div class="col-sm-9">
<select ng-model="simulationsettings.Symbol" ng-change="SymbolChanged()" name="fmSymbols" id="fmSymbols">
<option ng-repeat="item in symbols" value="{{item.Symbol}}">{{item.Symbol}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">start date</label>
<div class="col-sm-9">
<input type="text" id="fmStartDate" class="form-control input-sm"
datetimepicker
ng-model="simulationsettings.StartDate"
placeholder="..."
name="fmStartDate">
</div>
</div>
</div>
form debug: '{{formDebug}}'
</div>
</div>
The datetimepicker directive
"use strict";
angular.module("datetimepicker", [])
.provider("datetimepicker", function () {
var defaultOptions = {};
this.setOptions = function (options) {
defaultOptions = options;
};
this.$get = function () {
return {
getOptions: function () {
return defaultOptions;
}
};
};
})
.directive("datetimepicker", [
"$timeout",
"datetimepicker",
function ($timeout,datetimepicker) {
var defaultOptions = datetimepicker.getOptions();
return {
require : "?ngModel",
restrict: "AE",
scope : {
datetimepickerOptions: "#"
},
link : function ($scope, $element, $attrs, ngModelCtrl) {
var passedInOptions = $scope.$eval($attrs.datetimepickerOptions);
var options = jQuery.extend({}, defaultOptions, passedInOptions);
$element
.on("dp.change", function (e) {
if (ngModelCtrl) {
$timeout(function () {
ngModelCtrl.$setViewValue(e.target.value);
});
}
})
.datetimepicker(options);
function setPickerValue() {
var date = options.defaultDate || null;
if (ngModelCtrl && ngModelCtrl.$viewValue) {
date = ngModelCtrl.$viewValue;
}
$element
.data("DateTimePicker")
.date(date);
}
if (ngModelCtrl) {
ngModelCtrl.$render = function () {
setPickerValue();
};
}
setPickerValue();
}
};
}
]);
Any idea how to update the datetimepicker so it displays the updated value?
You are updating the model here:
$scope.simulationsettings.StartDate = "24/12/2014 8:26 PM";
Then you try to set the datepickers value here:
$("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));
But the datepicker has $scope.simulationsettings.StartDate as model. This is why you get the error. Angular is trying to call the digest cycle twice.
Your function should look like this:
$scope.SymbolChanged = function () {
console.log("Symbol ddl changed");
console.log("New value is " + $scope.simulationsettings.Symbol);
// hardcoded date
// TODO: Find StartDate and EndDate where Symbol = $scope.simulationsettings.Symbol
// the binding should be of the same type as your input, it means that the value returned from the datepicker must be a Date
$scope.simulationsettings.StartDate = new Date("24/12/2014 8:26 PM");
// This line is useless, the datepicked model is binded to $scope.simulationsettings.StartDate
// $("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));
console.log("startdate is " + $scope.simulationsettings.StartDate);
console.log("startdate is " + $scope.simulationsettings.EndDate);
}
But since you are using an input type="text" we need more information on the datetimepicker directive that you are using.
your are trying to put a date object in text field which may work if you're not using a date-picker
1/ change your input type to type date or change this $("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));
to this $("#fmStartDate").datetimepicker("setDate", $scope.simulationsettings.StartDate);
and it may work if your date-picker accepts this format "24/12/2014 8:26 PM"
2/ you may wanna check the date-picker documentation for the accepted format types
I have a watcher on a $scope variable which sets off a function to change the $scope variable to the beginning of the week of the date chosen. The function is returning the correct date but when I try to set the $scope variable to that date the view does not update. But checking it inside the inspector the $scope variable is changed but the view never updates. Here is the $watch function:
angular.module('hansenApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('hansenApp').controller('DatepickerCtrl', function ($scope) {
$scope.startDate = new Date();
$scope.endDate = new Date();
$scope.status = {
startOpened: false,
endOpened: false,
};
$scope.openStart = function ($event) {
$scope.status.startOpened = true;
};
$scope.openEnd = function ($event) {
$scope.status.endOpened = true;
};
$scope.$watch('startDate', function (dateVal) {
var oldDate = new Date(dateVal);
var tempDate = getStartDateOfWeek(dateVal);
if (oldDate.getTime() != tempDate.getTime()) {
$scope.startDate = tempDate;
}
});
$scope.$watch('endDate', function (dateVal) {
var oldDate = new Date(dateVal);
var tempDate = getEndDateOfWeek(dateVal);
if ($scope.endDate.getTime() != tempDate.getTime()) {
$scope.endDate = tempDate;
}
});
function getStartDateOfWeek(date) {
var ISOweekStart = date;
ISOweekStart.setDate(date.getDate() - date.getDay());
return ISOweekStart;
}
function getEndDateOfWeek(date) {
var ISOweekEnd = date;
ISOweekEnd.setDate(date.getDate() + (6 - date.getDay()));
return ISOweekEnd;
}
});
Edit 1: Here's the view:
<p class="input-group">
<input type="text" id="endDate" class="form-control" uib-datepicker-popup="MM/dd/yyyy" ng-model="endDate" is-open="status.endOpened" close-text="Close" placeholder="End Date:" runat="server" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openEnd($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
You do not change the reference of the date, but just the value of it.
A Date is an object in javascript, hence if you do not change the reference (replace it by a new Date() object) the angular change detector will not trigger again.
So you will have to replace the startDate by a completely new instance of a javascript date with the given properties.
So replace
var ISOweekEnd = date;
by
var ISOweekEnd = new Date();
I am new to web issues and asking for advice. What I am trying to do is here:
1 - There is a Datepicker in the page with several javascript posts
2 - When the page is opened first time, the post methods should be called with initial values
3 - When I changed the date interval from Datepicker and press Submit button, the page should refresh with the new values and so the posts should be triggered again with the new values.
4 - When the page is refreshed with new values, I want the datepicker input parts (there are 2 of them) to show the updated values.
5 - Currently, there are no initial values. Also, the 4th item on this list is missing.
I am aware that there are a couple of basic things missing here, but I can't find out through the questions because of not knowing how the system works. Can anyone please fix my code a little?
Here is Datepicker and its JS part:
<li>
<div class="input-daterange input-group" id="datepicker" style="margin-top: 10px; align-content:center">
<input type="text" class="input-sm form-control" id="startDate" value="07/01/2015" maxlength="10" name="start" style="width:90px" />
<span class="input-group-addon">ile</span>
<input type="text" class="input-sm form-control" id="endDate" value="07/05/2015" maxlength="10" name="end" style="width:90px" />
</div>
</li>
<li>
<button id="goster" type="button" class="btn btn-default" onclick="goster()"
style="background-color:#C71F45;color:white;
margin-top:10px; margin-left:10px">
Göster
</button>
</li>
<script>
function goster() {
startDate = document.getElementById('startDate').value;
endDate = document.getElementById('endDate').value;
var url = "http://localhost:50523/Home/Index?startDate=" + startDate + "&endDate=" + endDate;
window.location.replace(url);
}
</script>
<script>
$(document).ready(function () {
var QueryString = function () {
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString!
var query_string = {};
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = decodeURIComponent(pair[1]);
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(decodeURIComponent(pair[1]));
}
}
return query_string;
}();
$('.input-daterange').datepicker({
format: "mm/dd/yyyy",
autoclose: true,
language: "tr",
orientation: "top auto",
todayHighlight: true
});
var startDate = QueryString.startDate;
var endDate = QueryString.endDate;
$.post(
"/api/getUserTotalExp?startDate=" + startDate + "&endDate=" + endDate,
{ data: {} },
function (data) {
$('#totaluserexp').html(data + " saat");
}
);
$.post(
"/api/getUserExpDaily?startDate=" + startDate + "&endDate=" + endDate,
{ data: {} },
function (data) {
...
}
);
});
</script>
Only need a single onReady (you did that)
Put the code in the code and not in the markup (goster() call)
Since $.post is really an ajax shortcut, I will break that out a
bit so we can deal with the data a bit more elegantly perhaps. (I
used it to put the .done promise on the jqXHR to use (runs when
the ajax completes with success)
Odd that the datepicker is not on the inputs? Perhaps I do not know
something but I would put them ON the inputs (how you handle that in
reality is up to you.
Get the CSS/style out of the markup (leave that to you)
Address the issue with the post/page refresh - put that in a cookie (google that, suggest the $.cookie plugin perhaps?)
Markup and code:
<li>
<div class="input-daterange input-group" id="datepicker" style="margin-top: 10px; align-content:center">
<input type="text" class="input-sm form-control" id="startDate" value="07/01/2015" maxlength="10" name="start" style="width:90px" /> <span class="input-group-addon">ile</span>
<input type="text" class="input-sm form-control" id="endDate" value="07/05/2015" maxlength="10" name="end" style="width:90px" />
</div>
</li>
<li>
<button id="goster" type="button" class="btn btn-default" style="background-color:#C71F45;color:white;
margin-top:10px; margin-left:10px">Göster</button>
</li>
and code:
$(document).ready(function () {
$('#goster').on('click', function () {
var startDate = $('#startDate').val();
var endDate = $('#endDate').val();
goster(startDate, endDate);
});
$('input.input-sm').datepicker({
format: "mm/dd/yyyy",
autoclose: true,
language: "tr",
orientation: "top auto",
todayHighlight: true
});
function goster(startDate, endDate) {
PostUserExp(startDate, endDate);
}
function PostUserExp(startDate, endDate) {
//var startDate = $('#startDate').val();
//var endDate = $('#endDate').val();
var myajaxExp = $.ajax({
url: "/api/getUserTotalExp",
data: {
"startDate": startDate,
"endDate": endDate
}
});
myajaxExp.done(function (data, textStatus, jqXHR) {
// what to do with data
$('#totaluserexp').html(data + "saat");
});
var myajaxDaily = $.ajax({
url: "/api/getUserExpDaily",
data: {
"startDate": startDate,
"endDate": endDate
}
});
myajaxDaily.done(function (data, textStatus, jqXHR) {
// what to do with data
$('#totaluserexp').html(data + "saat");
});
}
var startDate = $('#startDate').val();
var endDate = $('#endDate').val();
PostUserExp(startDate, endDate)
});
$.post("/api/getUserExpDaily",
{
'startDate': startDate,
'endDate': endDate
},
function (data) {
....
});
EDIT: data: { ... } was a typo. Oh well.
This will alway jQuery to format your dates. Now if you server is expecting JSON then it's a slightly different problem. However, the code above should work for your case.
https://developer.chrome.com/devtools
The Network tab will allow you to inspect your post. If you looked for the line getUserExpDaily POST. Then you can inspect the values, format, and response from your code.
I am new to bootstrap and trying to use it and I am trying to do below mentioned.
My datetime picker control 1
<div class='input-group date' id="reportdate">
<input type='text' class="form-control" value="#Model.ReportDate.ToString("dd/MM/yyyy")"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
My date time picker control 2
<div class='input-group date' id="fromdate">
<input type='text' class="form-control" value="#Model.RecievedFrom.ToString("dd/MM/yyyy")"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
What I am trying to do?
On change of the value from my date time picker control 1 it should change the value in datetimepiker control2.
What I did?
My main.js class which is handling all these functions.
var main = main || {};
main.functions = function() {
function changeDates() {
***// I am trying to change the value of my datetime picker control2 here.
var val = $(this).val;
alert(val);***
}
return {
changeDates: changeDates
};
}();
main.Loader = function () {
//-- Entry point
function init() {
var $body = $("body");
loadDatePickers($body);
loadTimePickers($body);
}
//-- Load date time pickers
function loadDatePickers($context) {
var $datePickers = $context.find(".date");
if ($datePickers.length) {
$datePickers.each(function () {
$(this).datetimepicker({ language: 'en-gb', pickTime: false });
if ($(this).attr("id") == "reportdate") {
$(this).change(function () {
main.functions.changeDates();
});
}
});
}
}
function loadTimePickers($context) {
var $timePickers = $context.find(".time");
if ($timePickers.length) {
$timePickers.each(function () {
$timePickers.datetimepicker({ language: 'en-gb', pickDate: false });
});
}
}
return {
init: init
};
}();
$(document).ready(function () {
main.Loader.init();
});
Any help would be much appreciated.
You can use .change event for that,
$("#reportdate").find(".form-control").change(function () {
$("#fromdate").find(".form-control").val($(this).val());
});