I asked a similar question but couldn't find the right solution. I have used a code to dynamically generate input fields that includes a date field followed by age.
I am trying jQuery's datepicker class to pick the dates and each age field calculates based on these select dates.
The problem is I don't know how to set the value of age input field. Tried and searched lots of posts and it may be a simple fix but since I'm not too familiar with jQuery methods, I got no luck to get it.
Please see excerpt from my codes:
$(document).on('click', '.datepicker', function() {
$(this).datepicker('destroy').datepicker({
onSelect: function(value, ui) {
var dob = new Date(value),
today = new Date(),
age = new Date(today - dob).getFullYear() - 1970;
$('.age').find('input').val(age);
},
changeMonth: true,
changeYear: true,
dateFormat: "mm-dd-yy",yearRange: "1900:+10",showOn:'focus'}).focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Title:
<input class="form-control" type="text" name="firstname[]" value="" size="30" />
Date:
<input type="text" class="form-control datepicker" name="dates[]" value="" size="10" />
Age: <input type="text" class="form-control age" id="age" name="age[]" value="" size="10" />
<a href="#"
class="remove">Remove</a></p>
I've tried text(), html(), val() with many other ways around but nothing works. The issue from above is setting a value to id in 'dob' input. I'd rather want it to appear in VALUE of 'age' input field. Hope I explained my issue properly.
As you mention in your question you are adding multiple input (date) fields dynamically followed by age. So using simple class $(".age") or id $('#age') selector will not work for you.
If you use $(".age").val(age) it will change value for all input with class age and if you use $("#age").val(age) it will update value only for first matching input with id age.
So, You need to use closest() with find() like this:
$(ui.input).closest("p").find('.age').val(age);
OR
Use siblings() selector like this
$(ui.input).siblings(".age").val(age);
I hope it will help you.
$(document).on('click', '.datepicker', function() {
//don't add datepicker again if already exist
if (!$(this).hasClass("hasDatepicker")) {
$(this).datepicker({
onSelect: function(value, ui) {
var dob = new Date(value),
today = new Date(),
age = today.getFullYear() - dob.getFullYear();
$(ui.input).closest("p").find('.age').val(age);
//$(ui.input).siblings(".age").val(age);
},
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
yearRange: "1900:+10",
showOn: 'focus'
}).focus();
}
});
$(document).on('click', "#add", function() {
$(".wrapper").append('<p class="user-row">Title: ' +
'<input class="form-control" type="text" name="firstname[]" value="" size="30" />' +
'Date: <input type="text" class="form-control datepicker" name="dates[]" value="" size="10" />' +
'Age: <input type="text" class="form-control age" name="age[]" value="" size="10" />' +
' Remove </p>');
});
$(document).on('click', '.remove', function() {
$(this).closest("p").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
<p class="user-row">Title:
<input class="form-control" type="text" name="firstname[]" value="" size="30" /> Date:
<input type="text" class="form-control datepicker" name="dates[]" value="" size="10" /> Age: <input type="text" class="form-control age" name="age[]" value="" size="10" />
Remove
</p>
</div>
<button id="add" type="button">ADD</button>
You just need to remove find('input') in your code
$('.age').find('input').val(age);
into
$('.age').val(age);
Because with $('.age') you've already found the input, no need to use find to find it again. Document for find is here
Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
You need tp remove .find(input) because $('.age') should do the job. Also, you need to include jquery-ui for datepicker. The following should do the trick.
$(document).on('click', '.datepicker', function() {
$(this).datepicker('destroy').datepicker({
onSelect: function(value, ui) {
var dob = new Date(value),
today = new Date(),
age = new Date(today - dob).getFullYear() - 1970;
$('.age').find('input').val(age);
},
changeMonth: true,
changeYear: true,
dateFormat: "mm-dd-yy",yearRange: "1900:+10",showOn:'focus'}).focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p>Title:
<input class="form-control" type="text" name="firstname[]" value="" size="30" />
Date:
<input type="text" class="form-control datepicker" name="dates[]" value="" size="10" />
Age: <input type="text" class="form-control age" id="age" name="age[]" value="" size="10" />
<a href="#"
class="remove">Remove</a></p>
change date format to "mm/dd/yy"
it should be $('#age').val(age);
<script type="text/javascript">
jQuery(document).on('click', '.datepicker', function() {
$(this).datepicker('destroy').datepicker({
onSelect: function(value, ui) {
var dob = new Date(value),
today = new Date(),
age = new Date(today - dob).getFullYear() - 1970;
$('#age').val(age);
},
changeMonth: true,
changeYear: true,
dateFormat: "mm/dd/yy",
yearRange: "1900:+10",
showOn:'focus'
}).focus();
});
</script>
Goodluck on coding!
Related
In the given fiddle here
There are two date inputs 'from' and 'to'
In which I want to disable future date in 'From' only but when i apply endDate code in applies to both 'from' and 'to' date.
I want to apply 'endDate' that is I want to disable future date in 'from' field only and not in 'to' date field.
I picked this datepicker from thiss site
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
$('.input-daterange').datepicker({
autoclose: true,
endDate: '+0d'
});
For any query please comment below
Since you're using the date range functionality and you can't initialize the date pickers separately, you can utilize the built-in setEndDate method to set the endDate property of a specific input element.
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
In your case, you would initialize the date range picker on both input fields (like you were already doing) and then target the specific input element by its attribute and use the setEndDate method:
Updated Example
$('.input-daterange').datepicker({
autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
Full Snippet:
$('.input-daterange').datepicker({
autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
Assign an id to each input field:
Then instead of $('.input-daterange') use $('#startdate') and $('#enddate') and only include endDate: '+0d' where you need it.
You can use the input name attribute as a selector, and set the attributes for each instance of the datepicker.
// HTML
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
// JS
$('input[name=start]').datepicker({
autoclose: true,
endDate: '+0d'
});
$('input[name=end]').datepicker({
autoclose: true
});
Try this:
$(".datepicker").datepicker({maxDate: '0'});
I work with form by emailmeform and I would like to forbid the selection of dates past before today.
How can I restrict the dates of datepicker like this one (three separate text boxes)?
I tried adding a script area containing ".datepicker ({minDate: 0})" in the header of my form, but the separation of fields day, month, and years complicates the operation!
EMF_jQuery('.datepicker').datepicker({
yearRange: '-120:+20',
showOn: 'button',
buttonImage: base_url+'images/calendar.png',
buttonImageOnly: true,
onSelect: function(dateText, inst) {
var selectedDate = new Date(dateText);
EMF_jQuery('#'+inst.id+'year').val(selectedDate.getFullYear());
EMF_jQuery('#'+inst.id+'year-mm').val(((selectedDate.getMonth()+1)>9)?(selectedDate.getMonth()+1):('0'+(selectedDate.getMonth()+1)));
EMF_jQuery('#'+inst.id+'year-dd').val(selectedDate.getDate()>9?selectedDate.getDate():'0'+selectedDate.getDate());
EMF_jQuery('.'+inst.id+'yearformError').remove();
EMF_jQuery('.'+inst.id+'year-mmformError').remove();
EMF_jQuery('.'+inst.id+'year-ddformError').remove();
EMF_jQuery('#'+inst.id+'year'+','+'#'+inst.id+'year-mm'+','+'#'+inst.id+'year-dd').change();
},
changeMonth: true,
changeYear: true
});
HTML
<div class="emf-div-field"><span class="emf-field-datetime-day">
<input maxlength="2" id="element_21_year-dd" name="element_21_day" value="" class="emf-input-w20 validate[optional,custom[onlyNumber],length[2,2],lengthValue[1,31]]" type="text" size="2" temp_disabled="0" temp_validation_def="validate[optional,custom[onlyNumber],length[2,2],lengthValue[1,31]]">
<label for="element_21_year-dd" class="emf-bottom-label">JJ</label>
</span><span class="emf-sep">/</span><span class="emf-field-datetime-month">
<input maxlength="2" id="element_21_year-mm" name="element_21_month" value="" class="emf-input-w20 validate[optional,custom[onlyNumber],length[2,2],lengthValue[1,12]]" type="text" size="2" temp_disabled="0" temp_validation_def="validate[optional,custom[onlyNumber],length[2,2],lengthValue[1,12]]">
<label for="element_21_year-mm" class="emf-bottom-label">MM</label>
</span><span class="emf-sep">/</span><span class="emf-field-datetime-year">
<input maxlength="4" id="element_21_year" name="element_21_year" value="" class="emf-input-w40 validate[optional,custom[onlyNumber],length[4,4]]" type="text" size="4" temp_disabled="0" temp_validation_def="validate[optional,custom[onlyNumber],length[4,4]]">
<label for="element_21_year" class="emf-bottom-label">AAAA</label>
</span><span>
<input type="hidden" id="element_21_" class="datepicker hasDatepicker" my_date_format="mm/dd/yy" value="02/15/2017" temp_disabled="0"><img class="ui-datepicker-trigger" src="//assets.emailmeform.com/images/calendar.png" alt="..." title="...">
</span></div>
Do you have a solution?
Thanks in advance
Based on select in datetimepicker I would like to set three dates. First is selected date + 28days, second selected date + 56days and third selected date + 84days. If user set a new date, script must do new calculation and set the this new dates in fields: datummeritve2, datummeritve3, datummeritve5.
I've seen some similar questions, but mostly it's not used datetimepicker and also with the answers there were writen I was not able to make it work.
In short.. When user picks a date, other fields must be filled with new calculated dates.
This is my code.
HTML
<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class='input-group date' id=''>
<p><span class="napis">Pick a date</span></p>
<input style="width: 280px;" type='text' class="form-control" id="datummeritve1" name="datummeritve1" placeholder="Datum meritve" value=""/>
</div>
</div>
<input style="width: 280px;" type='text' class="form-control" id="datummeritve2" name="datummeritve2" placeholder="Datum meritve" value=""/>
<input style="width: 280px;" type='text' class="form-control" id="datummeritve3" name="datummeritve3" placeholder="Datum meritve" value=""/>
<input style="width: 280px;" type='text' class="form-control" id="datummeritve4" name="datummeritve4" placeholder="Datum meritve" value=""/>
JS
$('#datummeritve1').datetimepicker({
onShow: function(ct){
this.setOptions({
minDate: new Date()
});
},
format: 'DD.MM.YYYY',
formatDate: 'DD.MM.YYYY',
datepicker: true,
timepicker: false
});
For my answer you have to include moment.js as well. You also have to set "disabled" for the input fields #datummeritve2, #datummeritve3 and #datummeritve4. NOTE: The user still can easily change them. You also have to check the dateDifference serverside
// Init the non clickable
$('#datummeritve2, #datummeritve3, #datummeritve4').datetimepicker({
defaultDate: new Date(),
locale:moment.locale('de-at'),
format: 'DD.MM.YYYY',
ignoreReadonly:false
});
// Init the main clickable
$('#datummeritve1').datetimepicker({
defaultDate: new Date(),
locale:moment.locale('de-at'),
format: 'DD.MM.YYYY',
ignoreReadonly:false
}).on("dp.change",function(e){
// Fetch the current date
var date28 = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY HH:mm").toDate());
var date56 = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY HH:mm").toDate());
var date84 = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY HH:mm").toDate());
// Add the days to the dates
date28.setDate(date28.getDate()+28);
date56.setDate(date56.getDate()+56);
date84.setDate(date84.getDate()+84);
// set it
$("#datummeritve2").data("DateTimePicker").date(date28);
$("#datummeritve3").data("DateTimePicker").date(date56);
$("#datummeritve4").data("DateTimePicker").date(date84);
});
Jsfiddle: https://jsfiddle.net/rwj2Lmh2/1/
I've managed to make it work (at least I think I did ;))..
Here is my code now. Maybe it can help someone..
JS
$('#datummeritve1').datetimepicker({
onShow: function(ct){
this.setOptions({
minDate: new Date()
});
},
format: 'DD.MM.YYYY',
formatDate: 'DD.MM.YYYY',
datepicker: true,
timepicker: false
});
$("#datummeritve1").change(function(){
var newEnd = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY").toDate());
newEnd.setDate(newEnd.getDate()+28);
$("#datummeritve2").val(moment(newEnd).format('DD.MM.YYYY'));
newEnd.setDate(newEnd.getDate()+28);
$("#datummeritve3").val(moment(newEnd).format('DD.MM.YYYY'));
newEnd.setDate(newEnd.getDate()+28);
$("#datummeritve4").val(moment(newEnd).format('DD.MM.YYYY'));
});
HTML
<input style="width: 280px;" type='text' class="form-control" id="datummeritve1" name="datummeritve1" placeholder="Datum meritve" value=""/>
<input readonly style="width: 280px;" name="datummeritve2" type="text" id="datummeritve2" class="form-control" placeholder="" value="">
<input readonly style="width: 280px;" name="datummeritve3" type="text" id="datummeritve3" class="form-control" placeholder="" value="">
<input readonly style="width: 280px;" name="datummeritve4" type="text" id="datummeritve4" class="form-control" placeholder="" value="">
Summary: Based on selection of the date (datetimepicker). Text fields (readonly) are filled with generated dates.
I need help in having two date formats for my datepicker.
Initially when shown on the browser i need to be in Europe format dd-mm-yy but when i pass it on the URL i need it to be in a yy-mm-dd format so the booking system can recognise it. is this possible.
my backend is wordpress so i am using the default calendar datepicker of wordpress.
<form action="http://localhost/booking/" method="GET" class="">
<input type="hidden" name="Op" value="SetState" />
<p class="acontact left calendar">
Check-in Date<br>
<span class="checkin"><input type="text" name="DateFrom" value="2016-04-05" size="40" class="MyDate" name="MyDate_a" aria-required="true" id="dp1457978166549" style="width:150px;"> </span>
</p>
<p class="acontact left calendar">
Check-out Date<br>
<span class="checkout"><input type="text" name="DateTo" value="2016-04-08" size="40" class="MyDate" name="MyDate_b" aria-required="true" id="dp1457978166550" style="width:150px;"> </span>
</p>
<div class="button"><input class="request" name="anfrage" type="submit" value="Check Booking"></div>
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.MyDate').datepicker({
dateFormat : 'yy-mm-dd'
});
});
I am not familiar with javascript so your help is appreciated.
Updated:-->Check this code, I had made changes in date values, they are in dd-mm-yy format, but after pressing button, they will be displayed in yy-mm-dd format, also check requested URL:
<form action="http://localhost/booking/" method="GET" class="">
<input type="hidden" name="Op" value="SetState" />
<p class="acontact left calendar">
Check-in Date<br>
<span class="checkin"><input type="text" name="DateFrom" value="13-12-2016" size="40" class="MyDate" aria-required="true" id="dp1457978166549" style="width:150px;"> </span>
</p>
<p class="acontact left calendar">
Check-out Date<br>
<span class="checkout"><input type="text" name="DateTo" value="14-12-2016" size="40" class="MyDate" aria-required="true" id="dp1457978166550" style="width:150px;"> </span>
</p>
<div class="button"><input class="request" name="anfrage" type="submit" onClick="runf()" value="Check Booking"></div>
</form>
<script type="text/javascript">
function runf() {
var d1 = document.getElementsByName("DateFrom")[0].value;
var d2 = document.getElementsByName("DateTo")[0].value;
alert("DateFrom Before: "+d1);
var segments = d1.split('-');
d1 = segments[2] + '-' + segments[1] + '-' + segments[0];
document.getElementsByName("DateFrom")[0].value=d1;
alert("DateFrom After: "+d1);
alert("DateTo Before: "+d2);
segments=d2.split('-');
d2 = segments[2] + '-' + segments[1] + '-' + segments[0];
document.getElementsByName("DateTo")[0].value=d2;
alert("DateTo After: "+d2);
}
I resolve this issue ussing alfField and altFormat properties and including a new input hidden to store the alternative format:
jQuery(document).ready(function() {
jQuery('.MyDate').datepicker({
dateFormat : 'dd-mm-yy',
altField: "#alternative_input_id",
altFormat: 'yy-mm-dd'
});
});
By doing this you can take your desired format from the new input type hidden.
Wish it help you!
Regards
Edit: I see you have two text input and you make the datepicker by class. Using the method I have post you need to set ID to each text input you have and then declare datepicker twice, one per input text (and creating two hidden input):
$(document).ready(function() {
$('#dp1457978166549').datepicker({
dateFormat : 'dd-mm-yy',
altField: "#alternative_input_id_1",
altFormat: 'yy-mm-dd'
});
$('#dp1457978166550').datepicker({
dateFormat : 'dd-mm-yy',
altField: "#alternative_input_id_2",
altFormat: 'yy-mm-dd'
});
});
how to disable dates from date picker following code
<input class="datepicker input-small" type="text" id="dpd1" required>
js code
<script>
$(document).ready(function() {
$('.datepicker').datepicker({
"autoclose": true
});
});
</script>
<input class="datepicker input-small" type="text" id="dpd1" required>
js code
<script>
$(document).ready(function() {
$('.datepicker').datepicker({
minDate: 0
});
});