Here's the Markup I'm Using :
Note: Currently, I am utilizing the Metronic pre-built template that comes with all necessary components.
<link href="vendors.bundle.css" rel="stylesheet" type="text/css">
<link href="style.bundle.css" rel="stylesheet" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="scripts.bundle.js" type="text/javascript"></script>
<script src="vendors.bundle.js" type="text/javascript"></script>
<script src="bootstrap-datepicker.js" type="text/javascript"></script>
<script>
$(function () {
$('#trigger').click(function () {
$('#myModal').modal("toggle");
return false;
})
});
</script>
Displayed below is my code:
<asp:Button runat="server" ID="trigger" OnClick="Unnamed_Click" Text="Click"/>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Bootstrap Date Picker Examples</h5>
<asp:Label runat="server" ID="ShowLbl"></asp:Label>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="la la-remove"></span>
</button>
</div>
<div class="modal-body">
<div class="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">Minimum Setup</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="m_datepicker_1_modal" readonly="" placeholder="Select date">
</div>
</div>
<div class="form-group m-form__group row">
<label class="col-form-label col-lg-3 col-sm-12">Input Group Setup</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<div class="input-group date">
<input type="text" class="form-control m-input" readonly="" placeholder="Select date" id="m_datepicker_2_modal">
<div class="input-group-append">
<span class="input-group-text">
<i class="la la-calendar-check-o"></i>
</span>
</div>
</div>
</div>
</div>
<div class="form-group m-form__group row m--margin-bottom-20">
<label class="col-form-label col-lg-3 col-sm-12">Enable Helper Buttons</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<div class="input-group date">
<input type="text" class="form-control m-input" value="05/20/2017" id="m_datepicker_3_modal">
<div class="input-group-append">
<span class="input-group-text">
<i class="la la-calendar"></i>
</span>
</div>
</div>
<span class="m-form__help">Enable clear and today helper buttons</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-brand m-btn" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary m-btn">Submit</button>
</div>
</div>
</div>
</div>
Upon loading the modal, the clientclick event is triggered.
I also want to trigger the onclick event accordingly. Is it feasible? Seeking assistance as I am new to this. Please advise if there is a way to achieve this.
Below is the back-end :
protected void Unnamed_Click(object sender, EventArgs e)
{
//ShowLbl.Text = "Clicked";
do some SQL Work ();
then show it to modal();
}