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'
});
});
Related
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.
I have a date range picker on my page and it works all right except that once I pick the range the value doesn't update.
I'd say that this might be because once the date range is picked up it automatically does the search for the records, so I tried to update the value based on the
request.args.get("start_date") and request.args.get("last_date")
using js
document.getElementById('').value = '';
but it doesn't work.
Does anybody have any idea why I am not able to update the value?
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
autoUpdateInput: true
}, function(start, end) {
window.location.search = 'start_date=' + start.format("DD/MM/YYYY") + "&last_date=" + end.format("DD/MM/YYYY");
document.getElementById('daterange').value = start.format("DD/MM/YYYY") + " - " + end.format("DD/MM/YYYY");
});
});
</script>
<div class="col-md-12 center-block" style="padding-bottom: 2rem">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="daterange" name="daterange" value=""/>
</div>
</div>
Ok, I have this HTML:
<td class="text-left"><button type="button" onclick="addImage('<?php echo $language['language_id']; ?>');" data-toggle="tooltip" title="<?php echo $button_banner_add; ?>" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
On click I call JS function addImage.
<script type="text/javascript">
function addImage(language_id) {
html = '<td class="text-left"><div class="row"><div class="col-sm-6"><div class="form-group"><label class="col-sm-2 control-label" for="date-ended"><?php echo 'Date Started' ?></label><div class="input-group date" id="datetimepicker1"><input name="background_images_date_ended" type="text" id="date-ended" class="form-control" /><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div></div></div></td>';
$('#images' + language_id + ' tbody').append(html);
</script>
After that I want to call function on this div <div class="input-group date" id="datetimepicker1">
This function:
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
But this div is dynamically added and I don't know, but the function is not running.
Why you just dont init the datetimepicker at the bottom of the addImage function, or call another function from there?
function addImage(language_id) {
html = ' <td class="text-left"><div class="row"><div class="col-sm-6"><div class="form-group"><label class="col-sm-2 control-label" for="date-ended"><?php echo 'Date Started' ?></label><div class="input-group date" id="datetimepicker1"><input name="background_images_date_ended" type="text" id="date-ended" class="form-control" /><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div></div></div></td>';
$('#images' + language_id + ' tbody').append(html);
$('#datetimepicker1').datetimepicker();
}
or
function addImage(language_id) {
....
initDatepicker();
}
function initDatepicker () {
$('#datetimepicker1').datetimepicker();
}
For elements dynamically added, you must use event handlers like this:
someElement.addEventListener( "click", function() {
//some code to run on click
});
This should work for you then
I need a group of form fields to dynamically be added if a user does not enter the minimum required value.
So I need 3 years living history for a residential address. When a user enters the information on how long they have live in the house, if they have not lived in it for minimum 3 years. The same field group will be duplicated and entered below, allowing the person to enter their previous address. This will continue until minimum 3 years of history has been entered.
The html looks like this
<!-- Current address-->
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label">Current Home Address</label>
<div class="col-sm-2">We need 3 years living history. Keep adding previous home addresses until you reach a minimum of 3 years history.</div>
<div class="col-sm-2"><input id="about_you_address-st[]" name="about_you_address-st[]" type="text" class="form-control input-md" placeholder="Street # and Name"></div>
<div class="col-sm-1"><input id="about_you_address-sub[]" name="about_you_address-sub[]" type="text" class="form-control input-md" placeholder="Suburb"></div>
<div class="col-sm-1"><input id="about_you_address-city[]" name="about_you_address-city[]" type="text" class="form-control input-md" placeholder="City"></div>
</div>
<br>
<div class="row">
<label class="col-md-4 control-label"></label>
<div class=" col-SM-offset-3 col-sm-1"><input id="about_you_address-state[]" name="about_you_address-state[]" type="text" class="form-control input-md" placeholder="State"></div>
<div class="col-sm-1"><input id="about_you_address-post[]" name="about_you_address-post[]" type="text" class="form-control input-md" placeholder="Postcode"></div>
<div class="col-sm-1">
<input type="text" class="form-control" id="about_you_address-duration[]" name="about_you_address-duration[]" placeholder="DD/MM/YYYY"
data-fv-date="true"
data-fv-date-format="DD/MM/YYYY"
data-fv-date-message="The value is not a valid date" /><div class="help">Date moved in</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default addButton1"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<!-- The hidden Current address template containing the Current address fields and a Remove button, this gets added when a user clicks "add" on the form group above -->
<div class="form-group hide" id="homeTemplate">
<div class="row">
<label class="col-md-4 control-label">Previous Address</label>
<div class=" col-SM-offset-2 col-sm-2"><input id="about_you_address-st[]" name="about_you_address-st[]" type="text" class="form-control input-md" placeholder="Street # and Name"></div>
<div class="col-sm-1"><input id="about_you_address-sub[]" name="about_you_address-sub[]" type="text" class="form-control input-md" placeholder="Suburb"></div>
<div class="col-sm-1"><input id="about_you_address-city[]" name="about_you_address-city[]" type="text" class="form-control input-md" placeholder="City"></div>
</div>
<br>
<div class="row">
<label class="col-md-4 control-label"></label>
<div class=" col-SM-offset-3 col-sm-1"><input id="about_you_address-state[]" name="about_you_address-state[]" type="text" class="form-control input-md" placeholder="State"></div>
<div class="col-sm-1"><input id="about_you_address-post[]" name="about_you_address-post[]" type="text" class="form-control input-md" placeholder="Postcode"></div>
<div class="col-sm-1">
<input type="text" class="form-control" id="about_you_address-duration[]" name="about_you_address-duration[]" placeholder="DD/MM/YYYY"
data-fv-date="true"
data-fv-date-format="DD/MM/YYYY"
data-fv-date-message="The value is not a valid date" /><div class="help">Date moved in</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default removeButton1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
The javascript which currently handles dynamically adding and removing the form group manually looks like this
$(document).ready(function() {
// The maximum number of options
var MAX_OPTIONS = 20;
$('#custom')
.formValidation()
// Add button click handler
.on('click', '.addButton1', function() {
var $template = $('#homeTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template),
$about_st = $clone.find('[name="about_you_address-st[]"]')
$about_sub = $clone.find('[name="about_you_address-sub[]"]')
$about_city = $clone.find('[name="about_you_address-city[]"]')
$about_state = $clone.find('[name="about_you_address-state[]"]')
$about_post = $clone.find('[name="about_you_address-post[]"]')
$about_dur = $clone.find('[name="about_you_address-duration[]"]');
// Add new field
$('#custom')
.formValidation('addField', $about_st)
.formValidation('addField', $about_sub)
.formValidation('addField', $about_city)
.formValidation('addField', $about_state)
.formValidation('addField', $about_post)
.formValidation('addField', $about_dur);
})
// Remove button click handler
.on('click', '.removeButton1', function() {
var $row = $(this).parents('.form-group'),
$about_st = $row.find('[name="about_you_address-st[]"]')
$about_sub = $row.find('[name="about_you_address-sub[]"]')
$about_city = $row.find('[name="about_you_address-city[]"]')
$about_state = $row.find('[name="about_you_address-state[]"]')
$about_post = $row.find('[name="about_you_address-post[]"]')
$about_dur = $row.find('[name="about_you_address-duration[]"]');
// Remove element containing the option
$row.remove();
// Remove field
$('#custom')
.formValidation('removeField', $about_st)
.formValidation('removeField', $about_sub)
.formValidation('removeField', $about_city)
.formValidation('removeField', $about_state)
.formValidation('removeField', $about_post)
.formValidation('removeField', $about_dur);
})
// Called after adding new field
.on('added.field.fv', function(e, data) {
// data.field --> The field name
// data.element --> The new field element
// data.options --> The new field options
if (data.field === 'about_you_address-st[]') {
if ($('#custom').find(':visible[name="about_you_address-st[]"]').length >= MAX_OPTIONS) {
$('#custom').find('.addButton1').attr('disabled', 'disabled');
}
}
})
// Called after removing the field
.on('removed.field.fv', function(e, data) {
if (data.field === 'about_you_address-st[]') {
if ($('#custom').find(':visible[name="about_you_address-st[]"]').length < MAX_OPTIONS) {
$('#custom').find('.addButton1').removeAttr('disabled');
}
}
});
});
Thank you so much.
For starters you have id's with [] in them eg 'about_you_address-duration[]'. You can't do that. It's not unique
Add some javascript
function checkTimeTotal()
{
// Calculate total times
totalDays = 0;
lastDate = new Date.now();
$('[name="about_you_address-duration[]"]').each(function() {
// get days between now and last date
thisDate = $(this).val(); // Turn this into a date
totalDays += (difference between 2 dates);
lastDate = thisDate;
});
if (totalDays < (3 * 365)) {
// Add more options using your other code
}
}
// Need to call this again when you add the new form elements in the above code
$('[name="about_you_address-duration[]"]').off('change').on('change', checkTimeTotal());
Get difference between 2 dates in javascript? - this will get the days between 2 dates
I have a problem with getting data from datepicker inputbox into database.
I have a form
<form name="myForm">
<div>
<input type="text" name="todoNameField" ng-model="todoName" placeholder="wat do" required ng-minlength="1" class="form-control"
ng-keyup="($event.keyCode == 13 && todoName.length > 0) ? addItem() : return" style="width: 50%; margin-bottom: 10px"/>
<h4>Deadline?</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<button ng-click="addItem()" ng-hide="myForm.todoNameField.$invalid" class="btn btn-primary" type="button">Save</button>
</div>
</form>
And a controller with a function that handles adding new items
$scope.addItem = function () {
// Create a unique ID
var timestamp = new Date().valueOf();
// Get the Firebase reference of the item
var itemRef = new Firebase(FIREBASE_URL + timestamp);
$firebase(itemRef).$set({
id: timestamp,
name : $scope.todoName,
dt : $scope.dt, // <<< date
completed: false
});
$scope.todoName = "";
$scope.dt = "";
}
If I remove dt : $scope.dt everything is stored nicely and there is no problem with using it later, however when I try to store the date it's not working. It's not even adding a dt: in a database.. not even empty.
Is there something I'm missing with adding a value from datepicker? I thought I can grab it like the input "todoName", but It doesn't seem to be working.