Bootstrap and datepciker

Bootstrap and datepciker

HTML

<link rel="stylesheet" href="http://jqueryte.com/css/jquery-te.css">
<script src="http://jqueryte.com/js/jquery-te-1.4.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="http://alvarez.is/demo/dashio/favicon.png">

    <title>DASHIO - Bootstrap Admin + Front-End template</title>

    <!-- Import CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet">
	<link href="css/zabuto_calendar.css" rel="stylesheet">
	<link href="css/font-awesome.css" rel="stylesheet">
		<style>
		@media (min-width: 1200px) .boxContent[class*="span"]:first-child {
			margin-left: 0;
		}
		.boxContent[class*="span"]:first-child {
			margin-left: 0;
		}
		@media (min-width: 1200px) .boxContent .span2 {
			width: 14.52991452991453%;
		}
		@media (min-width: 1200px) .boxContent[class*="span"] {
			display: block;
			width: 100%;
			min-height: 30px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			float: left;
			margin-left: 2.564102564102564%;
		}
		 .widget {
			background: #fafafa;
			border: 1px solid #bfbfbf;
			clear: both;
			margin-top: 0px;
			margin-bottom: 30px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			text-align: center;
		}
		
		.boxContent .span2 {
		  width: 20%;
		  float:left;
		  padding-right: 15px;
		  padding-left: 15px;
		}
		
		
		.boxContent .widget-header {
		  -webkit-border-radius: 3px 3px 0 0;
		  -moz-border-radius: 3px 3px 0 0;
		 ...

TypeScript

$("#productDescription").jqte({
    change: function () {
        countChar('productDescription', 'experienceDesc');
    }
});

function countChar(val, divId) {
    var len = $('#' + val).val().length;
    if (len > 500) {
        val.value = val.value.substring(0, 500);
    } else {
        var a = 500 - len;
        var count = "<span style='color:red'>" + a + "</span>";
        var text = "You have";
        var count1 = "<span style='color:grey'>" + text + "</span>";
        var text1 = "characters left";
        var count2 = "<span style='color:grey'>" + text1 + "</span>";
        $('#' + divId).html(count1 + " " + count + " " + count2);
    }
}