bootstrap model using jquery

by gokulmaha

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css">
 <a id="dateLink" data-target="#dateContainer">
 <span id="dateFilterText" class="disableHyperlink">qqqqq</span>
 <i id="editDateFilter" class="fa fa-pencil-square-o hide" aria-hidden="true"></i>
 </a>  

 <div class="modal fade" id="dateContainer" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Select Month</h4>
                    </div>
                    <div class="modal-body">
                        <div class="col-sm-6">
                            <label>From</label>
                            <input type="text" class="form-control" id="fromDatePicker" readonly />
                        </div>
                        <div class="col-sm-6">
                            <label>To</label>
                            <input type="text" class="form-control" id="toDatePicker" readonly />
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-merlinback pull-right" data-dismiss="modal" id="applyDateFilterBtn">
                            <span>
                                <i class="fa fa-check-circle"></i>
                            </span> Apply 
                        </button>
                        <button class="btn btn-merlinback...

JavaScript

var Merlin = {
    queryConfig: [],  
    StandardDashBoardDate: "",  
    CustomDashBoardDate: "" 
};
var MeRLINIntDboard={};

registerDateFormatConversionUtilityFunction();
$('#dateLink').click(function(){
		$('#dateContainer').modal('show');
});
var date = new Date();
var firstDay = new Date(date.getFullYear(), 0, 1);
var lastDay = new Date(date.getFullYear(), 12, 0);
var dateDisplayFormat = "mmm-yyyy";

$('#fromDatePicker').datepicker({
        format: "MM-yyyy",
        startView: 1,
        minViewMode: 1,
        autoclose: true,
        todayHighlight: true,
});
$('#toDatePicker').datepicker({
        format: "MM-yyyy",
        startView: 1,
        minViewMode: 1,
        autoclose: true,
        todayHighlight: true
});

var date = new Date();
$('#fromDatePicker').datepicker('setDate',date);
$('#toDatePicker').datepicker('setDate',date);

alert($('#fromDatePicker').datepicker('getDate'));
alert($('#fromDatePicker').val());

Merlin["CustomDashBoardDate"] = firstDay.format(dateDisplayFormat) + " to " + lastDay.format(dateDisplayFormat);
$('#dateFilterText').text(Merlin.CustomDashBoardDate);

    
$('#applyDateFilterBtn').on('click', function () {
// $('#dateContainer').addClass('hide');
var fromDate = $('#fromDatePicker').datepicker("getDate");     
var toDate = $('#toDatePicker').datepicker("getDate");    
var lastDate = new Date(toDate.getFullYear(), toDate.getMonth() + 1, 0);
var dateDisplayFormat = "mmm-yyyy";
Merlin["CustomDashBoardDate"] = fromDate.format(dateDisplayFormat) + " to " + toDate.format(dateDisplayFormat);
$('#dateFilterText').text(Merlin.CustomDashBoardDate);

var firstDay = new Date(fromDate.getFullYear(), fromDate.getMonth(), 1);

MeRLINIntDboard.appliedFilter = [];
MeRLINIntDboard.appliedFilter.push({ "key": "Date", "values": [firstDay.toDateString(), toDate.toDateString()] });
  ...