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
});
});
Related
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!
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 am working on a project where there are two date fields available that will be used for searching between the dates. What I want to do is when a user chooses a date in the FROM field then all the previous dates in the TO field should be disabled.
Example:
FROM: 2016-03-28
To : 2016-04-10
Here in the above example suppose I want to search between these two given dates then while choosing a date from the date picker in the TO field all the dates till 2016-03-28 should be disabled and the user must not be able to select them. Please help.
jQuery date picker:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="css/jquery-1.10.1.min.js"></script>
<script src="css/jquery-ui.js"></script>
<script>
$(function(){
$('.date').datepicker({ format: 'yyyy-mm-dd'});
});
</script>
HTML:
<div class="form-group col-sm-2">
<label>From</label>
<input type="text" name="fdate" autocomplete="off" class="form-control date" style="height:25px;" value="<?php echo $fdate; ?>" />
</div>
<div class="form-group col-sm-2">
<label>To</label>
<input type="text" name="tdate" autocomplete="off" class="form-control date" style="height:25px;" value="<?php echo $tdate; ?>" />
</div>
You can achieve it like this:
$(function(){
var dateObject;
$("input[name='fdate']").datepicker({
format: 'yyyy-mm-dd',
onSelect: function(dateText, inst) {
dateObject = $(this).datepicker({dateFormat: 'yyyy-mm-dd'}).val();
$("input[name='tdate']").datepicker({
format: 'yyyy-mm-dd',
minDate: new Date(dateObject),
});
}
});
});
Here is the working fiddle
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'
});
});