function dateRangeSelector(){
var days = 2;
var date = new Date($("#start_date").val()),
days = parseInt($("#get_my_value").val(), 10);
if(!isNaN(date.getTime())){
date.setDate(date.getDate() + days);
$("#end_date").val(date.toInputFormat());
} else {
alert("Invalid Date");
}
}
Date.prototype.toInputFormat = 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]); // padding
};
$('#try').attr('hidden', true);
$('.btn-number').click(function(e){
e.preventDefault();
$('#try').attr('hidden', false);
fieldName = $(this).attr('data-field');
type = $(this).attr('data-type');
var input = $("input[name='"+fieldName+"']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if(type == 'minus') {
if(parseInt(input.val()) == input.attr('min')) {
$(this).attr('hidden', true);
}
if(currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
} else if(type == 'plus') {
if(currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
if(parseInt(input.val()) == input.attr('max')) {
$(this).attr('disabled', true);
}
}
} else {
input.val(0);
}
});
function dateRangeSelector(){
var days = 2;
var date = new Date($("#start_date").val()),
days = parseInt($("#get_my_value").val(), 10);
if(!isNaN(date.getTime())){
date.setDate(date.getDate() + days);
$("#end_date").val(date.toInputFormat());
} else {
alert("Invalid Date");
}
}
Date.prototype.toInputFormat = 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]); // padding
};<button type="button" class="btn btn-block btn-social btn-foursquare bg-danger text-white" data-toggle="modal" data-target="#myModalForCustomization"><i class="fa fa-foursquare"></i> Build your own package</button>
<div class="container">
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal" id="myModalForCustomization">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-info text-white">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="form-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-danger btn-sm">Please Select Your Journey Date</button>
<!-- /btn-group -->
<input type="date" class="form-control input-sm" id="start_date" name="start_date" onchange="dateRangeSelector()">
</div>
</div>
</div>
<div class="col-10">
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="quant[2]" id="try">-
</button>
</span>
<button type="button" class="btn btn-danger btn-sm">How Many Nights You Will Like To Stay.?
<input type="text" name="quant[2]" class="form-control input-number" value="4" min="4" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
</button>
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number" data-type="plus" data-field="quant[2]">+
</button>
</span>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-danger btn-sm">This Is Your returning date.</button>
<!-- /btn-group -->
<input type="date" class="form-control input-sm" id="end_date" name="end_date">
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>function dateRangeSelector() {
var days = 2;
var date = new Date($("#start_date").val()),
days = parseInt($("#get_my_value").val(), 10);
if (!isNaN(date.getTime())) {
date.setDate(date.getDate() + days);
$("#end_date").val(date.toInputFormat());
} else {
alert("Invalid Date");
}
}
Date.prototype.toInputFormat = 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]); // padding
};
$('#try').attr('hidden', true);
$('.btn-number').click(function (e) {
e.preventDefault();
$('#try').attr('hidden', false);
fieldName = $(this).attr('data-field');
type = $(this).attr('data-type');
var input = $("input[name='" + fieldName + "']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if (type == 'minus') {
if (parseInt(input.val()) == input.attr('min')) {
$(this).attr('hidden', true);
}
if (currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
} else if (type == 'plus') {
if (currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
if (parseInt(input.val()) == input.attr('max')) {
$(this).attr('disabled', true);
}
}
} else {
input.val(0);
}
});
function dateRangeSelector() {
var days = 2;
var date = new Date($("#start_date").val()),
days = parseInt($("#get_my_value").val(), 10);
if (!isNaN(date.getTime())) {
date.setDate(date.getDate() + days);
$("#end_date").val(date.toInputFormat());
} else {
alert("Invalid Date");
}
}
Date.prototype.toInputFormat = 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]); // padding
};<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-block btn-social btn-foursquare bg-danger text-white" data-toggle="modal" data-target="#myModalForCustomization"><i class="fa fa-foursquare"></i> Build your own package</button>
<div class="container">
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal" id="myModalForCustomization">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-info text-white">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="date" class="form-control input-sm" id="start_date" name="start_date" onchange="dateRangeSelector()">
</div>
</div>
<div class="col-10">
<div class="form-group">
<div class="input-group">
<button type="button" class="btn-number"id="try">-</button>
<input type="text" name="quant[2]" class="form-control input-number" value="4" min="4" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
<button type="button" class="btn-number">+</button>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<input type="date" class="form-control input-sm" id="end_date" name="end_date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>whenever user decide to decrease the night value so minus button should disappear when night value goes upto 4.
im using javascript to make it possible but doesn't working.
unable to hide minus button when user try to click below 4 value.
also required to reduce this much of code of javascript.
someother part of code also available in javascript so please never mind of it.
thank you.
It's always a good thing to learn how to debug your code. For example if you use console.log("input") or console.log("type") after they're defined you would see that they don't have the value you would expect.
So try changing type from this:
type = $(this).attr('data-type');
to this:
type = e.target.innerHTML=="+"?"plus":"minus";
And input from this:
var input = $("input[name='" + fieldName + "']");
to this:
var input = $("#get_my_value");
Live demo here: http://jsfiddle.net/qtrn9Lhx/