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);
});
});
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'm getting problems with Kendo Scheduler UI, i'm trying to customize the popup editor with custom fields but i cannot edit elements in the popup. I would need some help to understand how to edit fields.
I've tried different scripts from telerik support but with no results. With these scripts i can create a new popup but not edit the old one.
<div id="scheduler"></div>
<script>
$('#editasnew').click(function(){
console.log("edit now");
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.cancelEvent();
setTimeout(function(){
console.log("add new event now");
scheduler.addEvent({ title: "(No title)" });
}, 2000);
});
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
editable: {
template: $("#editor").html()
},
edit: function(e) {
if (!e.event.isNew()) {
$(".k-edit-buttons.k-state-default").prepend('<a class="k-button" id="editasnew">Edit as New</a>');
}
},
views: [
{ type: "day" }
],
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}
]
});
</script>
NO errors, just not working. basically i would like to convert the "end: new Date("2013/6/6 09:00 AM")" line to a drop-down list.
<script id="editor" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="title">Title</label></div>
<div class="k-edit-field" data-container-for="title">
<input type="text" class="k-input k-textbox" name="title" data-bind="value: title"></div>
<div class="k-edit-label">
<label for="start">Start</label>
</div>
<div data-container-for="start" class="k-edit-field">
<input type="text"
data-role="datetimepicker"
data-interval="15"
data-type="date"
data-bind="value:start,invisible:isAllDay"
name="start"/>
<input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="start" />
<span data-bind="text: startTimezone"></span>
<span data-for="start" class="k-invalid-msg" style="display: none;"></span>
</div>
<div class="k-edit-label"><label for="end">End</label></div>
<div data-container-for="end" class="k-edit-field">
<input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
<input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
<span data-bind="text: endTimezone"></span>
<span data-bind="text: startTimezone, invisible: endTimezone"></span>
<span data-for="end" class="k-invalid-msg" style="display: none;"></span>
</div>
<div class="k-edit-label"><label for="ownerId">Employee's</label></div>
<div data-container-for="ownerId" class="k-edit-field">
<select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"
data-value-field="" data-text-field="">
#*#for (int i=0; i<='#ViewBag.employeelist'.length; i++){#
<option value=${' #ViewBag.employeelist[0]'EmployeeId}>${' #ViewBag.employeelist[0]'Employeename}</option>
# } #*#
</select>
#* <select class="form-control" data-role="dropdownlist" data-text-field="Employeename" data-value-field="EmployeeId" data-bind="value:EmployeeId, source: #ViewBag.employeelist"></select>*#
</div>
</script>
#(Html.Kendo().Scheduler<HRMSWebApplication.Models.Data.TaskViewModel>()
.Name("scheduler")
.Date(DateTime.Now)
.StartTime(new DateTime(DateTime.Now.Year, 12, 31))
.Height(550)
.Views(views =>
{
// views.DayView();
// views.WorkWeekView();
// views.WeekView();
views.MonthView(MonthView => MonthView.Selected(true));
//views.AgendaView();
//views.TimelineView();
})
//.Editable(e => e.TemplateId("editor"))
.Resources(resource =>
{
resource.Add(m => m.OwnerID)
.Title("Employee")
.DataTextField("Employeename")
.DataValueField("EmployeeId")
.BindTo(#ViewBag.employeelist);
})
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.TaskID);
m.Field(f => f.Title);
m.RecurrenceId(f => f.RecurrenceID);
})
.Read("Read", "LeavePlanner")
//.Filter(filters =>{filters.Add(model => model.OwnerID).IsEqualTo(System.Web.HttpContext.Current.Session["userid"].ToString());})
.Create("Create", "LeavePlanner")
.Destroy("Destroy", "LeavePlanner")
.Update("Update", "LeavePlanner")
// .Filter(filters =>
// {
// //filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
//})
)
)
This how we done in MVC.Aspnet please above script works for you
Having issues pulling the values put in a textbox with ajax and posting them to another .php file. Ive done this once before with a checkbox but wasn't able to duplicate my results. Here is the code for the text boxes in questions.
<div align = "right">
<div class = ='text'>
<span style="float:right;"><strong> Status Report Date</strong>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<div id="dates"></div>
These are my date picker boxes since I attached a datepicker script to them but figured they act as normal text-boxes.
Here is the script for grabbing values from the textboxes
$(document).ready(function(){
$('input[type="text"]').click(function(){
var from = $(this).val();
$.ajax({
url:"sortByDates.php",
method:"POST",
data:{text:text},
success:function(data){
$('#dates').html(data);
}
});
});
});
</script>
Here is the .php file I am trying to send the values to.
<?php
if (isset($_GET['pageSubmit'])) {
$firstDate= $_POST['from'];
$lastDate= $_POST['to'];
echo $firstDate;
echo $lastDate;
}
I think you lost your focus... Check this code out
<div alight = "right">
<div class='text'>
<span ><strong> Status Report Date</strong>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<div id="dates"></div>
<button id="submit">click</button>
Jquery
<script>
$(document).ready(function(){
$('#submit').click(function(){
var from = $('#from').val();
var to = $('#to').val();
ps = "submit";
$.ajax({
url:"sortByDates.php",
method:"POST",
data:{pageSubmit: ps,from:from, to: to},
success:function(data){
$('#dates').html(data);
}
});
});
});
php script
<?php
if (isset($_POST['pageSubmit'])) {
$firstDate= $_POST['from'];
$lastDate= $_POST['to'];
echo $firstDate;
echo $lastDate;
}
?>
Firstly add value="" in the inputs
Then in your js code, you are sending "text" variable which is undefined as your variable is "from".
So try adding : data:{text:from}
You have not passed the values from,to and pagesubmit in ajax.Try this code hope it helps
In ajax
$(document).ready(function(){
$('input[type="text"]').click(function(){
var from = $("#from").val();
var to = $("#to").val();
$.ajax({
url:"sortByDates.php",
method:"POST",
data:{from:from,to:to,pageSubmit:1},
success:function(data){
$('#dates').html(data);
}
});
});
});
In PHP
<?php
if (isset($_GET['pageSubmit'])) {
$firstDate= $_POST['from'];
$lastDate= $_POST['to'];
echo $firstDate;
echo $lastDate;
}
?>
The variable "text" you use in the section
{text:text}
is undefined. So therefore no data will be sent.
Other than that there are other problems here, do you want both values to be sent? Your code doesn't look like it supports that. Are you sure you want this to occur when the user clicks the textbox?.
I want to check shift start time and shift time values overlapped or not. if user enter overlapped values it should prompt error. please advice
<div class="form-group">
<label for="">Shift Start:</label>
<div class='input-group date' id='datetimepicker3'>
<input type='text' name="shift_start" class="form-control"
id='datetimepicker3' value="{{old('shift_start')}}" /> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-time"></span>
</span>
</div>
<div class="form-group">
<label for="">Shift End:</label>
<div class='input-group date' id='datetimepicker5'>
<input type='text' name="shift_end" class="form-control"
value="{{old('shift_end')}}" /> <span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
this is my script
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
$('#datetimepicker5').datetimepicker({
format: 'HH:mm'
});
});
Create a javascript function :
function checkTime()
{
var start = $('#datetimepicker3').val();
var end = $('#datetimepicker5').val();
var tabStart = start.split(':');
var tabEnd = end.split(':');
var dateStart = new Date();
dateStart.setHours(parseInt(tabStart[0]));
dateStart.setMinutes(parseInt(tabStart[1]));
var dateEnd = new Date();
dateEnd.setHours(parseInt(tabEnd[0]));
dateEnd.setMinutes(parseInt(tabEnd[1]));
if(dateStart < dateEnd)
{
alert('ok');
}
else
{
alert('ko');
}
}
Then in you datetimepicker :
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm',
onSelect: function(){
checkTime();
}
});
$('#datetimepicker5').datetimepicker({
format: 'HH:mm',
onSelect: function(){
checkTime();
}
});
});
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));