I have two field in the form which are mention in below:-
<div class="form-group">
<label class="control-label col-sm-2" for="date">Date:</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="training_start_date" value="">
to
<input type="text" class="form-control" name="training_end_date" value="">
</div>
</div>
I need when we give the date in two field then output can be get in the same page in this place:
Duration: <!-- Display the difference of those dates without refreshing -->
I am feel glad and thankful if anyone give the concept about to do this requirement.
You are looking for something like this?
HTML:
<!-- JQuery and JQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="form-group">
<label class="control-label col-sm-2" for="date">Date:</label>
<div class="col-sm-5">
<input id="date1" type="text" class="form-control" name="training_start_date" value="">to
<input id="date2" type="text" class="form-control" name="training_end_date" value="">
</div>
</div>
<br> <span> Diff:</span> <span id='diff'> - </span> <span> Days</span>
JS:
$('#date1').datepicker();
$('#date2').datepicker();
$('#date2').change(function () {
var diff = $('#date1').datepicker("getDate") - $('#date2').datepicker("getDate");
$('#diff').text(diff / (1000 * 60 * 60 * 24) * -1);
});
Working JSFiddle: http://jsfiddle.net/ddan/dLtp0k1u/
EDIT
Based on your comment:
No manual download needed here. It's just referencing hosted libraries.
Use this in a simple html page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<!-- JQuery and JQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="form-group">
<label class="control-label col-sm-2" for="date">Date:</label>
<div class="col-sm-5">
<input id="date1" type="text" class="form-control" name="training_start_date" value="">to
<input id="date2" type="text" class="form-control" name="training_end_date" value="">
</div>
</div>
<br>
<span> Diff:</span>
<span id='diff'> - </span>
<span> Days</span>
<script>
$('#date1').datepicker();
$('#date2').datepicker();
$('#date2').change(function () {
var diff = $('#date1').datepicker("getDate") - $('#date2').datepicker("getDate");
$('#diff').text(diff / (1000 * 60 * 60 * 24) * -1);
});
</script>
</body>
</html>
I think I have majority of your problems solved...
Change the type to 'date' for all your inputs. Like this:http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date
Use the HTML onblur attribute so that your function runs every time the input box is out of focus.
Use the code below to calculate Date Difference. Code Credit:http://ditio.net/2010/05/02/javascript-date-difference-calculation/
var DateDiff = {
inDays: function(d1, d2) {
var t2 = d2.getTime();
var t1 = d1.getTime();
return parseInt((t2-t1)/(24*3600*1000));
},
inWeeks: function(d1, d2) {
var t2 = d2.getTime();
var t1 = d1.getTime();
return parseInt((t2-t1)/(24*3600*1000*7));
},
inMonths: function(d1, d2) {
var d1Y = d1.getFullYear();
var d2Y = d2.getFullYear();
var d1M = d1.getMonth();
var d2M = d2.getMonth();
return (d2M+12*d2Y)-(d1M+12*d1Y);
},
inYears: function(d1, d2) {
return d2.getFullYear()-d1.getFullYear();
}
}
var dString = "May, 20, 1984";
var d1 = new Date(dString);
var d2 = new Date();
document.write("<br />Number of <b>days</b> since "+dString+": "+DateDiff.inDays(d1, d2));
document.write("<br />Number of <b>weeks</b> since "+dString+": "+DateDiff.inWeeks(d1, d2));
document.write("<br />Number of <b>months</b> since "+dString+": "+DateDiff.inMonths(d1, d2));
document.write("<br />Number of <b>years</b> since "+dString+": "+DateDiff.inYears(d1, d2));
Related
I am Inserting tags using Bootstrap Tokenfield Tag Data. It works fine with insert operation. But I can not able to update that tags data. How to update tag in database. I am listing all tags that from database. But How to update I can not get idea, how to edit tags value.
Please help.
MY php code look like this
<div class="form-group">
<label class="form-label" for="validation-username">Tags <span class="text text-danger">*</span></label>
<?php
$tags = explode(",",$a['tags']);
foreach($tags as $t => $value){?>
<span class="tm-tag tm-tag-info" id="CIGpD_<?php echo $t;?>">
<span><?php echo $value;?></span>
x
</span>
<?php } ?>
<input type="text" value="<?php echo $a['tags']?>" name="tags" placeholder="Tags" class="typeahead tm-input form-control tm-input-info"/>
</div>
My JS look like this
$('.tm-tag-remove').click(function(){
var tagid = document.querySelector('.tm-tag-info').id;
$('#' + tagid).remove();
var tag = $('.tm-input-info').val();
console.log(tag);
var tagArr = tag.split(',');
tagArr.forEach(function(tagArr, value){
var spanid = $('#CIGpD_' + value).text();
// console.log(spanid);
});
});
Instead of assigning values from php you should assign value from javascript so that it will update tags. $a['tags'] you need this array in javascript like I have used in example yourTags or you can try comma speared values instead also.
Here is the working example:
$('.tm-tag-remove').click(function() {
var tagid = document.querySelector('.tm-tag-info').id;
$('#' + tagid).remove();
var tag = $('.tm-input-info').val();
console.log(tag);
var tagArr = tag.split(',');
tagArr.forEach(function(tagArr, value) {
var spanid = $('#CIGpD_' + value).text();
// console.log(spanid);
});
});
var yourTags = ['blue','red','white'];
$('.typeahead').tokenfield({})
$('.typeahead').tokenfield('setTokens', yourTags.join(','));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css" rel="stylesheet" />
<div class="form-group">
<label class="form-label" for="validation-username">Tags <span class="text text-danger">*</span></label>
<input type="text" value="" name="tags" placeholder="Tags" class="typeahead tm-input form-control tm-input-info" />
</div>
I am currently creating a form which will create an 'appointment or visit' to a doctors.
The form will consist of selecting Patient, Doctor, Condition, Medication and saving this (all of these are from separate tables) into a linked table using the id's as foreign keys.
But to do this form i am using Typeahead, it works when only using it once within the form, but once i add more than the once it stops working.
I am fairly new to PHP and learning so if im in the completely wrong place, guidance would be appreciated :)
My code is as follows.
Index.html
<html>
<head>
<title>Search</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'patient',
remote:'search.php?patientkey=%QUERY',
limit : 10
});
});
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'doctor',
remote:'search.php?doctorkey=%QUERY',
limit : 10
});
});
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'con',
remote:'search.php?conkey=%QUERY',
limit : 10
});
});
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'med',
remote:'search.php?medkey=%QUERY',
limit : 10
});
});
</script>
</head>
<body>
<div class=".col-md-6">
<div class="panel panel-default">
<div class="bs-example">
<input type="text" name="patient" class="typeahead tt-query" autocomplete="on" spellcheck="on" placeholder="Type Patient Name">
<input type="text" name="doctor" class="typeahead tt-query" autocomplete="on" spellcheck="on" placeholder="Type Doctor Name">
<input type="text" name="con" class="typeahead tt-query" autocomplete="on" spellcheck="on" placeholder="Type Condition">
<input type="text" name="med" class="typeahead tt-query" autocomplete="on" spellcheck="on" placeholder="Type Medication">
</div>
</div>
</div>
</div>
</body>
</html>
search.php
<?php // Include config file < includes $db connection
include("$_SERVER[DOCUMENT_ROOT]/freddies/inc/config.php");
?>
<?php
$patientkey=$_GET['patientkey'];
$array = array();
$query=mysqli_query($db, "select * from patient where sName or FName LIKE '%{$patientkey}%'");
while($row=mysqli_fetch_assoc($query))
{
$array[] = $row['fName']." ".$row['sName'];
}
echo json_encode($array);
mysqli_close($db);
$doctorkey=$_GET['doctorkey'];
$array = array();
$query=mysqli_query($db, "select * from doctor where sName or FName LIKE '%{$doctorkey}%'");
while($row=mysqli_fetch_assoc($query))
{
$array[] = $row['fName']." ".$row['sName'];
}
echo json_encode($array);
mysqli_close($db);
$conkey=$_GET['conkey'];
$array = array();
$query=mysqli_query($db, "select * from med where con_name LIKE '%{$conkey}%'");
while($row=mysqli_fetch_assoc($query))
{
$array[] = $row['con_name'];
}
echo json_encode($array);
mysqli_close($db);
$medkey=$_GET['medkey'];
$array = array();
$query=mysqli_query($db, "select * from drugs where medication LIKE '%{$medkey}%'");
while($row=mysqli_fetch_assoc($query))
{
$array[] = $row['medication'];
}
echo json_encode($array);
mysqli_close($db);
?>
I try to filter two values like this | filter:{voucher_type: selectedName } | filter:{voucher_type: both }
Here both is "B" and selectedName "P or R". Below code work only one filter only.
I want to combine this two filter values together and show the result like voucher_type B + P (Or) R.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<title>search</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-9">
<div ng-app="myApp">
<script type="text/ng-template" id="search">
<a>
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
<i> {{match.model.sub_name}} -({{match.model.group_name}}) </i>
</a>
</script>
<form class="form-search" ng-controller="autocompleteController">
Selected Ledger: {{selectedLedgers}} <br>
<br>
<!-- typeahead="c as c.ledger_id + '-' + c.ledger_name + ' <i>(' +c.group_name + ')</i>'-->
<input type="text" ng-model="both"></p>
<div>select voucher :<select ng-model="selectedName" ng-options="x for x in names">
</select>
</diV>
<input type="text" ng-model="selectedLedgers" placeholder="Search Ledger" typeahead="c as c.ledger_id + '-'+ c.ledger_name for c in producers | filter:$viewValue| limitTo:20 | filter:{voucher_type: selectedName1 } | filter:{voucher_type: both }" typeahead-min-length='2' typeahead-on-select='onSelectPart($item, $model, $label)' typeahead-template-url="search" class="form-control" style="width:350px;">
<i class="icon-search nav-search-icon"></i>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.9.0.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('autocompleteController', function($scope, $http) {
$http.get("getLedgers.php").success(function(data){
$scope.producers = data;
});
$scope.names = ["P", "R"];
$scope.filters = {
x: false,
company: '',
search: ''
};
$scope.both ='B';
});
</script>
</body>
</html>
Find my demo project here https://jsfiddle.net/basilbkodakk/sk549x4m/2/ .there have 3 company x,y,z .list box show x and y . z is common for x,y .that filter method in angularjs
I want the age field to be automatically filled as soon as you select the date from the datepicker.Right now the datepicker is not working in the snippet dont know why.I do also have the working age calculation code in the php section.Only need help in filling the age field as soon as you select the date.I read that you need ajax for that but I couldnt really work that out. Please do help as I am a beginner working on this part.
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" > < /script>
<script src="https:/ / maxcdn.bootstrapcdn.com / bootstrap / 4.0.0 - alpha.2 / js / bootstrap.min.js " integrity="
sha384 - vZ2WRJMwsjRMW / 8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7 " crossorigin="
anonymous "></script>
<script src="
http: //cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
< script type = "text/javascript" >
$(document).ready(function() {
$('#datetimepicker8').datepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
});
});
< /script>
<?php
$dob=$_POST['birthdate'];
$dob=explode("/",
$dob);
$age=(date("md",
date("U",
mktime(0,
0,
0,
$dob[0],
$dob[1],
$dob[2]))) > date("md") ? ((date("Y") - $dob[2]) - 1):(date("Y") - $dob[2]));
echo"age is" $age;
?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<form method="post" id="signUpForm">
<div class="container" id="signupContainer">
<div class="form-group row">
<label class="col-sm-2 form-control-label">Birthdate</label>
<div class="col-sm-5">
<div class='input-group date' id='datetimepicker8'>
<input type='text' id="birthdate" class="form-control" placeholder="D.O.B" name="birthdate" />
<span class="input-group-addon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
<label class="col-sm-1 form-control-label">Age:</label>
<div class="col-sm-4">
<input type="text" id="age" class="form-control" name="age" placeholder="Age" />
</div>
</div>
</div>
</form>
Try this code, php code is not required. Date of birth is calculated in datepicker onchange itself.
$('#datetimepicker8').datepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
},
dateFormat: "dd/mm/yy"
}).on('change', function (ev) {
var selectDate = $('#datetimepicker8').val().split("/");
var todayDate = new Date();
var selectedDate = new Date(selectDate[2], selectDate[1], selectDate[0]);
var firstDate = new Date(todayDate.getFullYear(), todayDate.getMonth() + 1, todayDate.getDate());
var diff = Math.floor(firstDate.getTime() - selectedDate.getTime());
var day = 1000 * 60 * 60 * 24;
var days = Math.floor(diff / day);
var months = Math.floor(days / 31);
var years = Math.floor(months / 12);
if (years > 0) {
$('#age').val(years);
} else {
$('#age').val('');
}
if (days <= -1) {
alert("Please select valid date of birth.")
$('#datetimepicker8').val("");
}
});
I have two fields where one field is used to give input of user age and another field to display the date of birth as per current date.
My html code is:-
<div class="col-xs-4 form-group">
<label><?php echo _('DOB'); ?> : </label>
<input value="" type="text" name="jbs_dob" id="jbs_dob" size="17" />
</div>
<div class="col-xs-4 form-group">
<label><?php echo _('Age'); ?> : </label>
<input value="" class="validate[required] form-control" type="text" name="jbs_age" id="jbs_fname" size="17" />
</div>
My js and jquery code is:
$(function () {
$("#jbs_age").click(function () {
var jbs_dob = new Date();
var jbs_age =$('jbs_age').val();
var diff= jbs_dob-jbs_age;
$( "#jbs_dob" ).html(diff);
});
});
Try below code. This will return you Year of the birth. If you provide age 25 then it will show 1991 in birth day field.
$(function () {
$("#jbs_age").click(function () {
var jbs_dob = new Date();
var jbs_age =$('#jbs_age').val();
var age = (jbs_dob.getFullYear() - jbs_age);
$( "#jbs_dob" ).val(age);
});
});