<title>ObsCalc</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap.min.css" rel="stylesheet">
- <link href="datepicker/jquery-ui.min.css" rel="stylesheet">
+ <link href="datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
- <script src="angular.js"></script>
+ <script src="validator.min.js"></script>
+ <script src="vue.js"></script>
<script src="moment.js"></script>
- <script src="datepicker/jquery-ui.min.js"></script>
+ <script src="datepicker/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
<div class="container">
<h2>Obstetric Calculator</h2>
</div>
</div>
- <div class="row" data-ng-app="oc" data-ng-controller="oc">
+ <div class="row" id="app">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<div class="tab-content">
<div class="panel panel-default tab-pane active" id="panel-lmp">
<div class="panel-body">
- <form name="form_lmp">
+ <form data-toggle="validator">
<div class="form-group">
<label>Enter L.M.P.:</label>
<div class="row">
<div class="col-sm-8">
- <div data-ng-class="{'has-error':form_lmp.dt.$invalid}"><input class="form-control" type="date" id="lmp-dt" name="dt" data-ng-model="lmp_dt" placeholder="YYYY-MM-DD" autocomplete="off" data-ng-change="getEdd()"></div>
+ <div class="form-group"><input class="form-control datepicker" type="date" v-model="lmpDt" placeholder="YYYY-MM-DD" autocomplete="off" require v-on:input="eddUpdt"><div class="help-block with-errors"></div></div>
</div>
<div class="col-sm-4">
<input type="reset" class="btn">
</div><!-- panel -->
<div class="panel panel-default tab-pane" id="panel-edd">
<div class="panel-body">
- <form name="form_edd">
+ <form data-toggle="validator">
<div class="form-group">
<label>Enter E.D.D.:</label>
<div class="row">
<div class="col-sm-8">
- <div data-ng-class="{'has-error':form_edd.dt.$invalid}"><input class="form-control" type="date" id="edd-dt" name="dt" data-ng-model="edd_dt" placeholder="YYYY-MM-DD" autocomplete="off" data-ng-change="getLmp()"></div>
+ <div class="form-group"><input class="form-control datepicker" type="date" v-model="eddDt" placeholder="YYYY-MM-DD" autocomplete="off" require v-on:input="lmpUpdt"><div class="help-block with-errors"></div></div>
</div>
<div class="col-sm-4">
<input type="reset" class="btn">
</div><!-- body -->
</div><!-- panel -->
</div><!-- tab -->
- <table class="table table-bordered" data-ng-hide="lmp_dt==null">
+ <table class="table table-bordered" v-if="lmpVal">
<tr class="active"><th>L.M.P.</th><th>E.D.D.</th></tr>
- <tr><th>{{showDate(lmp_dt)}}</th><th>{{showDate(edd_dt)}}</th></tr>
+ <tr><th vbind="lmpDt">{{lmpVal}}</th><th>{{eddVal}}</th></tr>
</table>
<hr>
- <table class="table" data-ng-show="calcDate()">
- <tr><th class="active">Maturation by Date at present</th><th>{{calcDate()}}</th></tr>
+ <table class="table" v-if="dateMat">
+ <tr><th class="active">Maturation by Date at present</th><th>{{dateMat}}</th></tr>
</table>
</div>
</div>
<p><strong>Calculate by U.S.G.</strong></p>
</div>
<div class="panel-body">
- <form name="form_usg">
+ <form data-toggle="validator">
<div class="form-group">
<label>Enter U.S.G. date:</label>
- <div data-ng-class="{'has-error':form_usg.dt.$invalid}"><input class="form-control" type="date" id="usg-dt" name="dt" data-ng-model="usg_dt" placeholder="YYYY-MM-DD" autocomplete="off"></div>
+ <div class="form-group"><input class="form-control datepicker" type="date" v-model="usgDt" placeholder="YYYY-MM-DD" require autocomplete="off"><div class="help-block with-errors"></div></div>
</div>
<div class="form-group">
<label>Enter U.S.G. Maturation:</label>
<div class="row">
- <div class="col-md-6" data-ng-class="{'has-error':form_usg.wk.$invalid}"><input class="form-control" type="number" min="0" max="52" data-ng-model="usg_wk" name="wk" placeholder="Weeks" autocomplete="off"></div>
- <div class="col-md-6" data-ng-class="{'has-error':form_usg.dy.$invalid}"><input class="form-control" type="number" min="0" max="6" data-ng-model="usg_dy" name="dy" placeholder="Days" autocomplete="off"></div>
+ <div class="col-md-6 form-group"><input class="form-control" type="number" min="0" max="52" v-model.number="usgWk" placeholder="Weeks" required autocomplete="off"><div class="help-block with-errors"></div></div>
+ <div class="col-md-6 form-group"><input class="form-control" type="number" min="0" max="6" v-model.number="usgDy" placeholder="Days" required autocomplete="off"><div class="help-block with-errors"></div></div>
</div>
</div>
<input type="reset" class="btn">
</form>
<br>
- <table class="table" data-ng-show="calcUsg()">
- <tr><th class="active">Maturation by U.S.G. at present</th><th>{{calcUsg()}}</th></tr>
+ <table class="table" v-if="usgMat">
+ <tr><th class="active">Maturation by U.S.G. at present</th><th>{{usgMat}}</th></tr>
</table>
</div><!-- body -->
</div><!-- panel -->
</div>
</div>
<div class="alert alert-info">
- <h3>Developed by Agnibho Mondal</h3>
+ <h3>Copyright © 2016<span id="copyright"></span> Agnibho Mondal</h3>
<h4><a href="http://www.agnibho.com" style="text-decoration:none;color:inherit">www.agnibho.com</a></h4>
</div>
+ <script>
+ $(document).ready(function(){
+ if(new Date().getFullYear()>2016){
+ $("#copyright").text("-"+new Date().getFullYear());
+ }
+ });
+ </script>
</div>
<script>
- if(navigator.userAgent.indexOf("Chrome")==-1){
- $("#lmp-dt").datepicker({
- dateFormat:"yy-mm-dd",
- changeYear:true,
- changeMonth:true
- });
- $("#edd-dt").datepicker({
- dateFormat:"yy-mm-dd",
- changeYear:true,
- changeMonth:true
- });
- $("#usg-dt").datepicker({
- dateFormat:"yy-mm-dd",
- changeYear:true,
- changeMonth:true
- });
- }
- var app=angular.module("oc",[]);
- app.controller("oc",function($scope){
- $scope.showDate=function(date){
- if(date!=null){
- dt=moment(date);
- if(dt.isValid()){
- return dt.format("DD/MM/YY");
- }
- }
+ $(document).ready(function(){
+ if(navigator.userAgent.indexOf("Firefox")!=-1){
+ $(".datepicker").datepicker({
+ format:"yyyy-mm-dd",
+ autoclose:true
+ }).on("changeDate", function(){
+ this.dispatchEvent(new Event("input"));
+ });
}
- $scope.getEdd=function(){
- if($scope.lmp_dt!=null){
- dt=moment($scope.lmp_dt);
- if(dt.isValid()){
- dt.add(9, "months");
- dt.add(7, "days");
- $scope.edd_dt=dt.toDate();
- }
- else{
- $scope.edd_dt=null;
- }
- }
- else{
- $scope.edd_dt=null;
- }
- };
- $scope.getLmp=function(){
- if($scope.edd_dt!=null){
- dt=moment($scope.edd_dt);
- if(dt.isValid()){
- dt.subtract(9, "months");
- dt.subtract(7, "days");
- $scope.lmp_dt=dt.toDate();
- }
- else{
- $scope.lmp_dt=null;
- }
- }
- else{
- $scope.lmp_dt=null;
- }
- };
- $scope.calcDate=function(){
- if($scope.lmp_dt!=null){
- dt=moment($scope.lmp_dt);
- if(dt.isValid()){
- today=moment();
- days=today.diff(dt, "days");
- if(days>0){
- return Math.floor(days/7)+" weeks "+days%7+" days";
- }
- }
- }
- };
- $scope.calcUsg=function(){
- if($scope.usg_dt!=null){
- dt=moment($scope.usg_dt);
- if(dt.isValid()){
- if($scope.usg_wk>=0 && $scope.usg_wk<=52 && $scope.usg_dy>=0 && $scope.usg_dy<=6){
- today=moment();
- diff=today.diff(dt, "days");
- days=$scope.usg_wk*7+$scope.usg_dy+diff;
- return Math.floor(days/7)+" weeks "+days%7+" days";
- }
- }
- }
- };
+ $("input[type='reset']").on("click", function(e){
+ this.form.reset();
+ $(this.form).find("input, select, textarea").each(function(){
+ this.dispatchEvent(new Event("input"));
+ });
+ });
});
</script>
+ <script src="app.js"></script>
</body>
</html>