I have two sets of field for adding time for the users. I have static field for selecting type and I can see the dropdown was working fine. I have another set of field that will be created dynamically based on the user input.Here the drop down is not working fine .I can feed the input data ,but the drop down is not working fine.
What I have tried is
<form class="form-inline">
<div class="form-group bfh-timepicker" data-mode="12h">
<label class="col-md-4 control-label" for="starttime">Starttime</label>
<div class="col-md-4">
<input type="time" class="form-control input-md" id="starttime0" placeholder="starttime"
required="">
</div>
</div>
<div class="form-group bfh-timepicker">
<label class="col-md-4 control-label" for="endtime">Endtime</label>
<div class="col-md-4">
<input type="time" class="form-control input-md" id="endtime0" placeholder="endtime" id="time"
required="">
</div>
</div>
</form>
The script code is
<script>
$(document).ready(function () {
$('#starttime0').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
});
</script>
<script>
$(document).ready(function () {
$('#endtime0').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
});
</script>
The above code is for selecting the time filed and which is static one.
The below code what I am creating is the dynamic filed for both start time and endtime
But the drop down is not working fine
Here my code is
<script>
var count = 0;
function addtextbox() {
count++;
var newTextBoxDiv = document.createElement('div');
newTextBoxDiv.id = 'Tools';
document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);
newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="starttime">Starttime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="starttime' + count + '" placeholder="starttime" required=""> </div></div>' +
'<div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="endtime">Endtime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="endtime' + count + '" placeholder="endtime" required=""></div></div></form>' +
' <input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">'
console.log("Iam count", count);
};
function removeTextArea(inputElement) {
var el = inputElement;
while (el.tagName != 'DIV') el = el.parentElement;
el.parentElement.removeChild(el);
count--;
}
</script>
The script code is
<script>
function timePicker()
{
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
}
</script>
What I am getting is ,the dynamic time picker function is not showing the drop down
What I need is when I add the dynamic field,the drop down should be shown for that also.
#Guru Krishna
Please try this code it works properly :
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>
<title>TimePicker</title>
</head>
<body>
<div class="container">
<h2>Time Picker</h2>
<p>This example of time picker using bootstrap and jquery.</p>
<form>
<div class="form-group">
<label for="starttime">Start Time:</label>
<input type="text" class="form-control" id="starttime" readonly>
</div>
<div class="form-group">
<label for="endtime">End Time:</label>
<input type="text" class="form-control" id="endtitme" readonly>
</div>
</form>
</div>
<script>
$("#starttime").clockpicker({
autoclose: true,
});
$("#endtitme").clockpicker({
autoclose: true,
});
</script>
</body>
</html>
I hope above code will be useful for you.
Thank you.
The element doesn't exist when you're initializing the time picker on endtime
in your function where you create the fields add
$('#endtime0').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
after you've created the element.
EDIT:
function addtextbox() {
count++;
var newTextBoxDiv = document.createElement('div');
newTextBoxDiv.id = 'Tools';
document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);
newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="starttime">Starttime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="starttime' + count + '" placeholder="starttime" required=""> </div></div>' +
'<div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="endtime">Endtime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="endtime' + count + '" placeholder="endtime" required=""></div></div></form>' +
' <input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">'
console.log("Iam count", count);
$('#Tools input').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
};
This is initializing the timepicker on any input inside your newly created #Tools div. It's called after the creation so that the element exists when you go to initialize it.
Related
There is an input which is Date Picker.
It is impossible to type in the input, everybody can only pick a date by mouse.
enter image description here
How can I call an event when the user changes Date ?
Here is HTML Code:
<div class="col-lg-3 col-md-3 col-xs-12">
<label for="homeWorkStartDate">From: </label>
<input type="text" id="homeWorkStartDate" class="pdate form-control" />
<input type="hidden" id="txtHomeWorkStartDate" />
<script>
var objCal1 = new AMIB.persianCalendar('homeWorkStartDate', {
extraInputID: 'txtHomeWorkStartDate',
extraInputFormat: 'YYYY-MM-DD'
});
</script>
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<label for="homeWorkEndDate">To: </label>
<input type="text" id="homeWorkEndDate" class="pdate form-control" />
<input type="hidden" id="txtHomeWorkEndDate" />
<script>
var objCal1 = new AMIB.persianCalendar('homeWorkEndDate', {
extraInputID: 'txtHomeWorkEndDate',
extraInputFormat: 'YYYY-MM-DD'
});
</script>
</div>
Here is what I tried but doesn't work:
$("#homeWorkStartDate,#homeWorkEndDate").on('input propertychange',function(){
alert("hi");
});
Did you try something like this ?
$( "#datepicker" ).datepicker({
onSelect: function () {
alert('hello');
}
})
I've tried to subtract between two dates. Date "a" and Date "b" using this code that I've found here. It works with jsfiddle.net but not with my project.
This is my code :
HTML and JS
$(document).ready(function() {
$("#startdate,#enddate").datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
})
$("#startdate").datepicker({
dateFormat: 'dd-mm-yy'
});
$("#enddate").datepicker({
dateFormat: 'dd-mm-yy'
});
$('#enddate').change(function() {
var start = $('#startdate').datepicker('getDate');
var end = $('#enddate').datepicker('getDate');
if (start < end) {
var days = (end - start) / 1000 / 60 / 60 / 24;
$('#days').val(days);
} else {
alert("You cant come back before you have been!");
$('#startdate').val("");
$('#enddate').val("");
$('#days').val("");
}
}); //end change function
}); //end ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css">
<div class="form-group">
<label class="control-label col-md-3">date 1</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="startdate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">date 2</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="enddate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">result</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="days">
</div>
</div>
But when I import into the project, it does not work. Like JS file not found the HTML's "id" or else. Can anyone help me ?
This is The JSFIDDLE link to this query.
it's working fine with me did you check in incognito mode? ctrl+shift+N and check in incognito
my project based on spring boot,Thymeleaf,mysql,html and Jquery.My Scenario is getting dynamically generated input box data and static input box data need to carried out and to hit the #controller.But in Jquery script ajax has issue,while debugging it says Type Error:$.ajax is not a function for jquery..
Here is the Error sample
:::Scenario::::
While clicking submit button hitting function based on form ID
socityreg
$("#socityreg").submit(function(event) {
// Prevent the form from submitting via the browser.
event.preventDefault();
ajxPost();
});
It will hit and call the ajxPost();
Here is full Full Script...
/**
* This is for adding input and form sumitting to controller
* This is used only for adding input field when clicking button
*/
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $("#addingInp"); //Fields wrapper
var add_button = $("#addButton"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment now x=1 after x++ x=2,so next code 2%2==0 is true
$(wrapper).append('<div style="margin-top: 20px" class="form-row">'
+'<div class"form-group col-md-3">'
+'<label for="block'+x+'">Block</label>'
+'<input id="block'+x+'" type="text" name="mytext[]" class="form-control block" placeholder="Enter Name"/>'
+'</div>'
+'<div class"form-group col-md-4">'
+'<label for="floor'+x+'">No of floors</label>'
+'<input id="floor'+x+'" type="text" name="mytext[]" class="form-control floor" placeholder="Start (Ex : 1)"/>'
+'</div>'
+'<div class"form-group col-md-4">'
+'<label for="flats'+x+'">No/Name of flats</label>'
+'<input id="flats'+x+'" type="text" name="mytext[]" class="form-control flatstart" placeholder="Start (Ex : A or 1)"/>'
+'<input id="flatsend'+x+'" type="text" name="mytext[]" class="form-control flatend" placeholder="End (Ex : Z or 100)"/>'
+'</div>'
+' X '
+'</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
//--------------------For Submitting data to controller
var url = window.location;
// SUBMIT FORM
$("#socityreg").submit(function(event) {
// Prevent the form from submitting via the browser.
event.preventDefault();
ajxPost();
});
function ajxPost(){
var max;
var blockname=[];
var floors=[];
var flatstart=[];
var flatend=[];
for(max=1;max<=max_fields;max++)
{
blockname[max] = $('#block'+max).val();
floors[max]=$('#floor'+max).val();
flatstart[max]=$('#flats'+max).val();
flatend[max]=$('#flatsend'+max).val();
}
var blockListPropSub ={
blockname,
floors,
flatstart,
flatend
}
// PREPARE FORM DATA
var formData = {
property_name : $("#propertyname").val(),
address1 : $("#inputaddress").val(),
address2 : $("#inputaddress2").val(),
city:$("#inputcity").val(),
state:$("#inputstate").val(),
country:$("#inputcountry").val(),
zipcode:$("#inputzip").val(),
blockListPropSub
}
// DO POST
$.ajax({
type : "POST",
contentType : "application/json",
url : url+"/savemasterproperty",
data :JSON.stringify(formData),
dataType : 'json',
success : function(result) {
if(result == "saved"){
$("#resultid").html("<strong>" +username+ " Registered Successfully!" );
}else{
$("#resultid").html("<strong>Error</strong>");
}
alert(result.status);
console.log(result);
},
error : function(e) {
alert("Error!")
console.log("ERROR: ", e);
}
});
// Reset FormData after Posting
//resetData();
}
/* function resetData(){
property_name : $("").val(),
address1 : $("").val(),
address2 : $("").val(),
city:$("").val(),
state:$("").val(),
country:$("").val(),
zipcode:$("").val(),
}*/
});//document.ready ends
HTML code using bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Vfraternity Socity Registration</title>
<!-- Bootstrap Library CDN link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<!-- Bootstrap/Jquery CDN library files -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- External JQuery Script -->
<script type="text/javascript" src="../js/AddingInput_PropertySocity.js"></script>
<!-- Panel starts -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Socity Registration</h3>
</div>
<div class="panel-body">
<form action="post" role="form" id="socityreg">
<div id="resultid"></div>
<div style="width:900px" class="container-fluid">
<div class="form-row" id="TextBoxesGroup">
<div class="form-group col-md-12">
<label for="propertyname" class="col-form-label">Property</label>
<input type="text" class="form-control" id="propertyname" placeholder="Property Name">
</div>
<div id="addingInp" style="margin-left: 4px;" class="col-md-12">
<input type='button' class="form-control col-md-4" value='Add Wings/Blocks' id='addButton'>
</div>
</div>
<div class="form-group">
<label for="inputaddress" class="col-form-label">Address</label>
<input type="text" class="form-control" id="inputaddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputaddress2" class="col-form-label">Address 2</label>
<input type="text" class="form-control" id="inputaddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputcity" class="col-form-label">City</label>
<input id="inputcity" class="form-control places" type="text"/>
</div>
<div class="form-group col-md-6">
<label for="inputstate" class="col-form-label">State</label>
<input id="inputstate" class="form-control place" type="text" />
</div>
<div class="form-group col-md-6">
<label for="inputcountry" class="col-form-label">Country</label>
<input id="inputcountry" class="form-control place" name="country"/>
</div>
<div class="form-group col-md-6">
<label for="inputzip" class="col-form-label">Zip</label>
<input id="inputzip" type="text" class="form-control" >
</div>
</div>
<center>
<button type="submit" class="btn btn-primary">Sign in</button>
<input type="reset" class="btn btn-primary btn btn-danger" value="Reset">
</center>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Please help me to solve this...
It seems you are using jquery-slim which doesn't include the ajax module:
Along with the regular version of jQuery that includes the ajax and
effects modules, we’re releasing a “slim” version that excludes these
modules. All in all, it excludes ajax, effects, and currently
deprecated code.
Here is a part of my HTML code:
<div class="form-group">
<label for="date_chargement" class="col-sm-4 control-label">Date de chargement minimum :</label>
<div class="col-sm-2">
<input type="text" class="form-control text-center" name="dateMinChargement" id="datepicker" onblur="VerifChampVide(this)"/>
</div>
<label for="heure_debut_chargement" class="col-sm-4 control-label">Heure de début :</label>
<div class="col-sm-2">
<input type="time" class="form-control text-center" name="heureDebutChargement" onblur="verifChampVide(this)">
</div>
</div>
My JS code :
jQuery(document).ready(function($){
$("#datepicker").datepicker({
autoUpdateInput: false
});
$("#datepicker2").datepicker({
autoUpdateInput: false
});
});
function surligne(champ, erreur)
{
if(erreur)
champ.style.backgroundColor = "#B43045";
else
champ.style.backgroundColor = "";
}
function verifChampVide(champ)
{
if(champ.value == '')
{
surligne(champ, true);
return false;
}
else
{
surligne(champ, false);
return true;
}
}
Datepicker works perfectly, so I don't need help on this. But, my problem is that I have created a function in js which change my inputs backcolor when it is empty. It works on all of my inputs on the form except the input where I put datepicker.
I read a lot on the web and I found the autoUpdateInput option. But it doesn't work.
Thank you for your help.
You have an error in this line:
<input type="text" class="form-control text-center" name="dateMinChargement" id="datepicker" onblur="VerifChampVide(this)"/>
You try to call the function VerifChampVide but you defined it as verifChampVide. JS is case sensitive.
For the second: because you have a datepicker you need to use the hide event instead of onblur.
Pay attention to the label for values and the id of the input fields.
For the input type time you will get an empty string or a value. The time value is not empty if the field will be filled to capacity.
The snippet:
jQuery(document).ready(function($){
$("#datepicker").datepicker({
autoUpdateInput: false
}).on('hide', function(e) {
verifChampVide(this);
});
$("#datepicker2").datepicker({
autoUpdateInput: false
});
});
function surligne(champ, erreur)
{
if(erreur)
champ.style.backgroundColor = "#B43045";
else
champ.style.backgroundColor = "";
}
function verifChampVide(champ)
{
if(champ.value == '')
{
surligne(champ, true);
return false;
}
else
{
surligne(champ, false);
return true;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="form-group">
<label for="datepicker" class="col-sm-4 control-label">Date de chargement minimum :</label>
<div class="col-sm-2">
<input type="text" class="form-control text-center" name="dateMinChargement" id="datepicker"/>
</div>
<label for="heure_debut_chargement" class="col-sm-4 control-label">Heure de début :</label>
<div class="col-sm-2">
<input type="time" id="heure_debut_chargement" class="form-control text-center" name="heureDebutChargement" onblur="verifChampVide(this)">
</div>
</div>
I wanted to write a code that would allow me to create the inputs such as subject, date of purchase and asset value, the input box has the attribute 'class = "datepicker"' and at first everything works properly read, but when I call the works to append to add other input (same as above) within the pages, "datepicker" no longer gives any sign of life.
I show you the code:
<div class="well bs-component" ><fieldset><div id="elencoBeni">
<div class="input-group">
<span class="input-group-addon">Oggetto</span>
<g:textField class="form-control" placeholder="Oggetto" name="oggetto" id="oggetto" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span>
<g:textField class="form-control datepicker" placeholder="Data acquisto" name="dataAcquisto" id="dataAcquisto" />
<span class="input-group-addon">Valore</span>
<g:textField class="form-control" placeholder="Valore" name="valoreBene" id="valoreBene"/><br/>
</div><br/>
</div>
<label class="btn btn-success" id="aggiungiOggetto" name="aggiungiOggetto" >+</label>
</fieldset></div>
jquery Function:
<g:javascript>
$(document).ready(function(){
$('.datepicker').datepicker({
language: 'it'
}); var i = 0;
$("#aggiungiOggetto").click(function(){
$("#elencoBeni").append('<div class="input-group"><span class="input-group-addon">Oggetto</span><input type="text" class="form-control" placeholder="Oggetto" name="oggetto'+i+'" id="oggetto'+i+'"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span><input type="text" class="datepicker form-control" placeholder="Data acquisto" name="dataAcquisto'+i+'" id="dataAcquisto'+i+'"/><span class="input-group-addon">Valore</span><input type="text" class="form-control" placeholder="Valore" name="valoreBene'+i+'" id="valoreBene'+i+'"/><br/></div><br/>');
i++
}); </g:javascript>
Since the input is dynamically added to dom, you need to initialize datepicker for the element after added to dom.
$(document).ready(function() {
$('.datepicker').datepicker({
language: 'it'
});
var i = 0;
$("#aggiungiOggetto").click(function() {
$("#elencoBeni").append('<div class="input-group"><span class="input-group-addon">Oggetto</span><input type="text" class="form-control" placeholder="Oggetto" name="oggetto' + i + '" id="oggetto' + i + '"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span><input type="text" class="datepicker form-control" placeholder="Data acquisto" name="dataAcquisto' + i + '" id="dataAcquisto' + i + '"/><span class="input-group-addon">Valore</span><input type="text" class="form-control" placeholder="Valore" name="valoreBene' + i + '" id="valoreBene' + i + '"/><br/></div><br/>');
// initialize datepicker again, which includes the dynamically added element
$('.datepicker').datepicker({
language: 'it'
});
i++
});
});
Because new elements don't have .datepicker() binded.
instead of:
$('.datepicker').datepicker({
language: 'it'
});
use:
$('body').on('focus',".datepicker", function(){
$(this).datepicker({
language: 'it'
});
});