jQuery Datepicker is not working for append - javascript

I have this problem when I'm trying to display a number of fields (tests, date, time), and onclick on those datepicker is supposed to run and disable the past dates, if I put the code outside the JavaScript it works just fine, so there must be something wrong with how I $.each loop it or with the append, but somehow I am not getting it to work
<script type = "text/javascript" >
$(document).ready(function() {
$("#select_test").change(function() {
var optionVal = [];
$.each($("#select_test option:selected"), function() {
if ($.inArray($(this).text(), optionVal) == -1) {
optionVal.push($(this).text());
}
});
var myselect = $('<select>');
var mydiv = $('<div>');
$.each(optionVal, function(index, key) {
mydiv.append("<tr><td><h5 class='wizard-title'>" + key + "</h5></td><td> <div class='col-sm-10'><div class='input-group date' data-provide='datepicker' data-date-format='dd-mm-yyyy'><input type='text' class='form-control datepicker dates' id='data-date' placeholder='Enter Test Date' name='testdate[]' value=''><div class='input-group-addon'><span class='glyphicon glyphicon-th'></span></div></div></div></td><td><div class='col-sm-12'><select name='testtime[]' class='form-control'><option value=''>Select Time</option><option value='0:00'>0:00</option><option value='1:00'>1:00</option><option value='2:00'>2:00</option><option value='3:00'>3:00</option><option value='4:00'>4:00</option><option value='5:00'>5:00</option><option value='6:00'>6:00</option><option value='7:00'>7:00</option><option value='8:00'>8:00</option><option value='9:00'>9:00</option><option value='10:00'>10:00</option><option value='11:00'>11:00</option><option value='12:00'>12:00</option><option value='13:00'>13:00</option><option value='14:00'>14:00</option><option value='15:00'>15:00</option><option value='16:00'>16:00</option><option value='17:00'>17:00</option><option value='18:00'>18:00</option><option value='19:00'>19:00</option><option value='20:00'>20:00</option><option value='21:00'>21:00</option><option value='22:00'>22:00</option><option value='23:00'>23:00</option></select></div></td></tr>");
});
$('#testsdetails').empty().append(mydiv.html());
});
});
</script>
I have called datepicker in below script.
<script>
$(document).on('click', '.dates', function() {
var dateToday = new Date();
$(this).datepicker({
minDate: 0
}).focus();
$(this).removeClass('datepicker');
});
</script>

I have been unable to replicate an issue with the code you provided.
$(document).ready(function() {
$("#select_test").change(function() {
var optionVal = [];
$.each($("#select_test option:selected"), function() {
if ($.inArray($(this).text(), optionVal) == -1) {
optionVal.push($(this).text());
}
});
var myselect = $('<select>');
var mydiv = $('<div>');
$.each(optionVal, function(index, key) {
mydiv.append("<tr><td><h5 class='wizard-title'>" + key + "</h5></td><td> <div class='col-sm-10'><div class='input-group date' data-provide='datepicker' data-date-format='dd-mm-yyyy'><input type='text' class='form-control datepicker dates' id='data-date' placeholder='Enter Test Date' name='testdate[]' value=''><div class='input-group-addon'><span class='glyphicon glyphicon-th'></span></div></div></div></td><td><div class='col-sm-12'><select name='testtime[]' class='form-control'><option value=''>Select Time</option><option value='0:00'>0:00</option><option value='1:00'>1:00</option><option value='2:00'>2:00</option><option value='3:00'>3:00</option><option value='4:00'>4:00</option><option value='5:00'>5:00</option><option value='6:00'>6:00</option><option value='7:00'>7:00</option><option value='8:00'>8:00</option><option value='9:00'>9:00</option><option value='10:00'>10:00</option><option value='11:00'>11:00</option><option value='12:00'>12:00</option><option value='13:00'>13:00</option><option value='14:00'>14:00</option><option value='15:00'>15:00</option><option value='16:00'>16:00</option><option value='17:00'>17:00</option><option value='18:00'>18:00</option><option value='19:00'>19:00</option><option value='20:00'>20:00</option><option value='21:00'>21:00</option><option value='22:00'>22:00</option><option value='23:00'>23:00</option></select></div></td></tr>");
});
$('#testsdetails').empty().append(mydiv.html());
});
$(document).on('click', '.dates', function() {
var dateToday = new Date();
$(this).datepicker({
minDate: 0
}).focus();
$(this).removeClass('datepicker');
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<select id="select_test">
<option></option>
<option>1</option>
</select>
<div id="testsdetails"></div>
If you're still having an issue, please comment and provide more details. Let us know if you see any errors from Console. I suspect that this is a BootStrap page based on your HTML.
Hope that helps.

Related

Populating options for JQuery multiple select

<script src="https://js.arcgis.com/4.25/"></script>
<script src="https://cdn.jsdelivr.net/gh/harvesthq/chosen#gh-pages/docsupport/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/harvesthq/chosen#gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/harvesthq/chosen#gh-pages/chosen.min.css" rel="stylesheet">
<script>
$(document).ready(function() {
$(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"
})
});
</script>
<script>
var dict1 = {'Canada': ['', 'Toronto'],'USA': ['', 'Hawaii']};
var dict2= {'Toronto': ['','A', 'B'],Hawaii': ['C', 'D']};
var dict3 = {'A': ['Item1', 'Item2'],
'B': ['Item3', 'Item4'],
'C': ['Item5', 'Item6'],
'D': ['Item7', 'Item8']
};
var regionOption = document.querySelector("#municipality");
var districtOption = document.querySelector("#districtName");
var provOption = document.querySelector("#region");
var neighOption = document.querySelector("#selectNeigh");
createOption(provOption, Object.keys(regions));
provOption.addEventListener('change', function() {
createOption(regionOption, dict1[provOption.value]);
});
regionOption.addEventListener('change', function() {
createOption(districtOption, dict2[regionOption.value]);
});
districtOption.addEventListener('change', function() {
createOption(neighOption, dict3[districtOption.value]);
});
function createOption(dropDown, options) {
dropDown.innerHTML = '';
options.forEach(function(value) {
dropDown.innerHTML += '<option name="' + value + '">' + value + '</option>';
});
};
</script>
<body>
<select id="region" style="width: 125px;"></select>
<select id="municipality" style="width: 125px;"></select>
<select id="districtName" style="width: 125px;"></select>
<form action="http://httpbin.org/post" method="post">
<select data-placeholder='Select Neighbourhoods' id="selectNeigh" multiple class='chosen-select'style="width: 125px;"></select>
</form>
</body>
So my current code works fine if I use the regular html multiple select. However, when I implement the following code: HTML: Select multiple as dropdown. The options are no longer being populated for select eight. Can someone please help me out.
From https://harvesthq.github.io/chosen/
If you need to update the options in your select field and want Chosen
to pick up the changes, you'll need to trigger the "chosen:updated"
event on the field. Chosen will re-build itself based on the updated
content.
$("#form_field").trigger("chosen:updated");
So you have trigger the update event in your createOption function.
function createOption(dropDown, options) {
dropDown.innerHTML = '';
options.forEach(function(value) {
dropDown.innerHTML += '<option name="' + value + '">' + value + '</option>';
});
$(".chosen-select").trigger("chosen:updated");
};

javascript operators do not match the input decimalx

I don't understand why when I use the condition value like a > b but it doesn't work properly, maybe because of the value a = decimal. following my code:
HTML
<input type="text" class="form-control" name="numberdays" id="numberdays" value="10.0/>
<input type="text" name="cutii" id="cutii" value="9.0">
<button class="btn btn-primary waves-effect" id="subcut" type="submit" disabled>
SCRIPT
cutifrom.addEventListener('input',()=>{
if (cutii.value > numberdays.value) {
subcut.removeAttribute('disabled');
}else{
subcut.setAttribute('disabled','disabled');
}
}) ;
the result is that my button is disabled, it shouldn't be.
here's my js. actually number days I use the datepicker and generate numbers that are automatically generated. maybe because it's the condition that I use the operator is not detected.
JS for datepicker
<script type="text/javascript">
$(document).ready(function(){
let $fromDate = $('#fromdate'),
$toDate = $('#todate');
$fromDate.datepicker().on('change', function(){
$toDate.datepicker('option', 'minDate', $(this).val());
});
$toDate.datepicker().on('change', function(){
$fromDate.datepicker('option', 'maxDate', $(this).val());
});;
});
$(function() {
let $fromDate = $('#fromdate'),
$toDate = $('#todate'),
$numberDays = $('#numberdays'),
$numberCuti = $('#cuti');
$fromDate.datepicker().on('change', function(){
$toDate.datepicker('option', 'minDate', $(this).val());
$numberDays.val(calculateDateDiff($toDate.val(), $(this).val()));
});
$toDate.datepicker().on('change', function(){
$fromDate.datepicker('option', 'maxDate', $(this).val());
$numberDays.val(calculateDateDiff($(this).val(), $fromDate.val()));
});
cutifrom.addEventListener('input',()=>{
if (parseFloat(cuti.value) >= parseFloat(numberdays.value)) {
subcut.removeAttribute('disabled');
}else{
subcut.setAttribute('disabled','disabled');
}
}) ;
function calculateDateDiff(endDate, startDate) {
if (endDate && startDate) {
let e = moment(endDate),
s = moment(startDate);
return e.diff(s, "days");
}
return null;
}
});
</script>
Your value is a String type and the comparison is not like Number, try converting the value to a number and see if it works.
You need to change the code to this form:
cutifrom.addEventListener('input',()=>{
if (Number(cutii.value) > Number(numberdays.value)) {
subcut.removeAttribute('disabled');
}else{
subcut.setAttribute('disabled','disabled');
}
}) ;
Good Luck :)

unable to get date picker on clone rows in the table

I was trying to get date picker on clone rows in the table.But it is not happening
my table code as follows:
<input type="text" class="form-control dp4 dob4" autocomplete="off" name="date[]" required>
<input type="button" class="btn btn-default addButton" value="Add" />
and javascript for clone row as follows:
$(function() {
$("#table-data").on('click', 'input.addButton', function() {
var $tr = $(this).closest('tr');
var allTrs = $tr.closest('table').find('tr');
var lastTr = allTrs[allTrs.length - 1];
var $clone = $(lastTr).clone();
$clone.find('td').each(function() {
var el = $(this).find(':first-child');
var id = el.attr('id') || null;
if (id) {
var i = id.substr(id.length - 1);
var prefix = id.substr(0, (id.length - 1));
el.attr('id', prefix + (+i + 1));
el.attr('name', prefix + (+i + 1));
}
});
$clone.find('input:text').val('');
$tr.closest('table').append($clone);
});
$("#table-data").on('change', 'select', function() {
var val = $(this).val();
$(this).closest('tr').find('input:text').val(val);
});
});
and my date picker code as follows:
$('.dob4').datepicker({
format: 'dd-mm-yyyy',
startDate: '-0m',
autoclose: true
});
Please help to solve this issue.
Thanks.
There is workaround to it,
How it Works:
Need to remove the class hasDatepickerfrom the cloned elements,because this is what is preventing the datepicker from getting attached to the specific element.
Need to remove the id attribute from each of the cloned elements else .datepicker() will assume that datepicker is added to this element.
After that call .datepicker() on cloned element.
JS Code:
$("#table-data").on('click', 'input.addButton', function () {
...
$clone.find('.dob4').removeAttr('id').removeClass('hasDatepicker');
$clone.find('.dob4').datepicker({
format: 'dd-mm-yyyy',
startDate: '-0m',
autoclose: true
});
...
});
Live Demo # JSFiddle

.change() doesn't work in Chrome when using autocomplete

.change() event doesn't work in Chrome when using autocomplete script and work when enter another value doesn't exist in autocomplete ...
but my code is totally working fine in Firefox
my code as the below
$('body').on('change', 'input[name^="itemNo"]', function(){
var currentquantity = $(this).val();
var maxquantity = $(this).data('maxquant');
alert(currentquantity);
alert(maxquantity);
})
and my html code as the below
<input type="text" data-type="product_serial" name="itemNo[]" data-maxquant="" id="itemNo_1" class="form-control autocomplete_txt serial_number_append" autocomplete="off">
Use the autocomplete's change event. You can bind it using the 'autocompletechange' event:
$('input[name^="itemNo"]').on( "autocompletechange", function( event, ui ) {} );
or on initialization, as in the following example:
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp"
];
$('input[name^="itemNo"]').autocomplete({
source: availableTags
}, {
change: function(event, ui) {
var currentquantity = $(this).val();
var maxquantity = $(this).data('maxquant');
alert(currentquantity);
alert(maxquantity);
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src=https://code.jquery.com/ui/1.11.2/jquery-ui.js "></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<input type="text " data-type="product_serial " name="itemNo[] " data-maxquant=" " id="itemNo_1 " class="form-control autocomplete_txt serial_number_append " autocomplete="off ">
See documentation for further information: autocomplete API
This works for me in chrome. The change event is called when the input field loses focus
$('body').on('change', 'input[name^="itemNo"]', function(){
var currentquantity = $(this).val();
var maxquantity = $(this).data('maxquant');
alert(currentquantity);
alert(maxquantity);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" data-type="product_serial" name="itemNo[]" data-maxquant="" id="itemNo_1" class="form-control autocomplete_txt serial_number_append" autocomplete="off">

How to autoinsert date in second field after there were already inserted some date into the 1st field?

Lets say i have two fields:
Start Date: <input type="date" name=""/>
End Date: <input type="date" name=""/>
I want when i add for example 03/12/2014 in the first field to autoinsert 7 days after the added date into the 2nd field ( in this case it will be 10/12/2014).
I will make my question more clear.
<title>Ha</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.min.js" type="text/javascript" ></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
I use jquery datepicker calendar.
And here are my fields:
<div class='ddate'><p>Start date:<input type="date" id="datepicker" name="d1" required="required"></p></div>
<div class='ddate'><p>End date:<input type="date" id="datepicker1" name="d2" ></p></div>
So i should use some JS function or ?
Doing date math in Javascript is hard because the native Date object in Javascript is one of the more poorly implemented objects in the language. My goto date library is moment.js.
The below code should get you pretty close and show you how to validate the fields for invalid date strings.
var $startDate = $('#startDate'),
$endDate = $('#endDate');
$startDate.on('change', function(e) {
var currentDate = moment($(this).val(), "YYYY-MM-DD");
$startDate.css('background', 'none');
if (currentDate.isValid()) {
var weekLater = currentDate.add(7, 'days');
$endDate.val(weekLater.format('YYYY-MM-DD'));
} else {
$startDate.css('background', 'red');
}
});
EDIT:
Working example http://jsbin.com/puwaco/1/edit?html,js,output
If you are using jQuery, you can simply attach an on event when start date changes ...
Start Date: <input type="date" name="date" id="start_date" />
End Date: <input type="date" name="date" id="end_date" />
... then ...
$("#start_date").on('blur', function() {
var self = this;
var new_date = new Date($(self).val());
new_date.setDate(new_date.getDate() + 8);
$("#end_date").val(new_date.yyyymmdd());
});
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
};
See jsFiddle

Categories