I'm using jquery datetimepicker & i have two controls:
From
To
I want get after three month date in To control as per selected date in From control.
What U tried:-
$(function () {
$('.datePicker').datetimepicker({
});
$('body').on('blur', '.pcFrom', function () {
var fromDate = $(this).val();
$('.pcTo').val(fromDate);
});
});
<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://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="form-group">
<label>From</label>
<input type="text" class="form-control datePicker pcFrom" data-date-format="MM-DD-YYYY">
</div>
<div class="form-group">
<label>To</label>
<input type="text" class="form-control pcTo">
</div>
You will need to convert the value from the datepicker to Date() and then use .setMonth() by adding the desired number of month. Then you will need to re-format it again on the output field.
$('.datePicker').datetimepicker();
$(document).on('blur', '.pcFrom', function() {
var fromDate = new Date($(this).val());
var after3Months = fromDate.setMonth(fromDate.getMonth()+3);
$('.pcTo').val("" + (fromDate.getMonth()+1) + "-" + fromDate.getDate() + "-" + fromDate.getFullYear());
});
<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://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="form-group">
<label>From</label>
<input type="text" class="form-control datePicker pcFrom" data-date-format="MM-DD-YYYY">
</div>
<div class="form-group">
<label>To</label>
<input type="text" class="form-control pcTo">
</div>
Related
I am dynamically creating start and end time drop down fields. I have one more remove link fileds also in my app. But when I use 'tab' key I can see the dropdown in remove button also. How should I avoid the droopdown in my remove button. How should I get rid of the time picker drop down in my remove button
my script is
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
id="bootstrap-css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<input class="btn btn-link" onclick="addtextbox()" type="button" value="Add">
</div>
<div id="ToolsGroup">
</div>
</div>
<script>
var count = 0;
function addtextbox() {
var newTextBoxDiv = document.createElement('div');
newTextBoxDiv.id = 'Tools';
document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);
newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group"><label class="col-md-4 control-label" for="starttime">Start time</label><div class="col-md-4"><input type="time" class="form-control input-md" id="dstarttime' + count + '" placeholder="starttime" required> </div></div>' +
'<div class="form-group"><label class="col-md-4 control-label" for="endtime">End time</label><div class="col-md-4"><input type="time" class="form-control input-md" id="dendtime' + count + '" placeholder="endtime"></div></div>' +
'<input type="button" value="Remove" class="reomvetools" onclick="removeTextArea(this);"></div><div id="dresultDiv' + count + '"></div></form>'
count++;
$('#Tools input').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
};
function removeTextArea(inputElement) {
var el = inputElement;
while (el.tagName != 'DIV') el = el.parentElement;
el.parentElement.removeChild(el);
counter--;
}
</script>
</body>
</html>
Instead of ("#tools input").timepicker ,I have tried giving the ("#form -group").timpicker,that doesnt work.
I tried changing the remove button class to 'btn btn-link' .That didnt work.
how should i do this? If I use the mouse I dont see the time dropdown in 'remove' button .If I use tab I see the dropdown. Can someone help me to get rid of the drop down in remove button?
Just define the input type explicity for time and you are good to go
$('#Tools input[type=time]').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
The problem is while user selecting input date field then display only month and year not date.
i had tried mm/yy in my jquery but didn't worked for me.
here is my code.
var onDateSelect = function(selectedDate, input) {
if (input.id === 'Start') { //Start date selected - update End Date picker
$("#End").datepicker('option', 'minDate', selectedDate);
} else { //End date selected - update Start Date picker
$("#Start").datepicker('option', 'maxDate', selectedDate);
}
};
var onDocumentReady = function() {
var datepickerConfiguration = {
dateFormat: "dd/mm/yy",
onSelect: onDateSelect
};
///--- Component Binding ---///
$('#Start, #End').datepicker(datepickerConfiguration);
};
$(onDocumentReady); // jQuery DOM ready callback registration
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<input type="text" id="Start" name="start" min="2000-03" required>
<input type="text" id="End" name="start" min="2000-03" required>
I'm choose first date field it also should display month and year & second field do as same as first field except don't display previous date accordingly first date so it is working finely except displaying month & year
Not a perfect solution, but you can use <input type="month">.
Example
<label for="start">Start month:</label>
<input type="month" id="start" name="start"
min="2020-08" value="2020-10">
Result
You can get use mm/yy to display only month and year ,also to you need to get date manually and then set in your datepicker. i.e :
var onDateSelect = function(selectedDate, input) {
if (input.id === 'Start') {
//getting start date
var start = $('#Start').datepicker("getDate");
console.log("start - "+start);
//setting it has mindate
$("#End").datepicker('option', 'minDate', start);
} else if(input.id === 'End'){
//getting end date
var end = $('#End').datepicker("getDate");
console.log("end - "+end);
//passing it max date in start
$("#Start").datepicker('option', 'maxDate', end);
}
};
var onDocumentReady = function() {
var datepickerConfiguration = {
onSelect: onDateSelect,
dateFormat: "mm/yy",
};
///--- Component Binding ---///
$('#Start, #End').datepicker(datepickerConfiguration);
};
$(onDocumentReady); // jQuery DOM ready callback registration
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.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/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="Start" name="start" min="2000-03" required>
<input type="text" id="End" name="start" min="2000-03" required>
I have a button that add a new bootstrap date-picker input field when the add button is clicked.
The problem I am facing is when the new bootstrap date-picker input field is added, it doesn't allow me to select date and the size of those newly added bootstrap date-picker input field isn't the same as the first input field
$(document).ready(function() {
var counter = 2;
$("#addBtn").click(function() {
var newRowDiv = $(document.createElement('div')).attr("class", 'row');
var newStartDateLabel = $(document.createElement('div')).attr("class", 'col-md-2');
var newStartDateInput = $(document.createElement('div')).attr("class", 'col-md-2', 'input-group', 'input-daterange');
newStartDateLabel.appendTo(newRowDiv);
newStartDateLabel.after().html("Start Date " + counter);
newStartDateInput.insertAfter(newStartDateLabel).html('<input "id="startDate"' + counter + 'name="startDate' + counter + 'type="text class="form-control" >');
newRowDiv.appendTo(".container");
counter++;
});
});
<body>
<form id="form" name="form" action="DateServlet" method="POST">
<div class="container">
<div class="row">
<div class="col-md-2">
Start Date 1
</div>
<div class="col-md-2 input-group input-daterange">
<input id="startDate1" name="startDate1" type="text" class="form-control">
</div>
</div>
</div>
<button id="addBtn" type="button" class="btn btn-default">Add</button>
</form>
<script type="text/javascript">
$('.input-daterange input').each(function() {
$(this).datepicker("clearDates");
});
</script>
</body>
Please look at below code. Specifically made changes at:
var newStartDateInput = $(document.createElement('div'))
.attr("class", 'col-md-2 input-group input-daterange');
AND
var dateText = $('<input id="startDate' + counter + '" name="startDate' + counter + '" type="text" class="form-control" >');
newStartDateInput.insertAfter(newStartDateLabel).html(dateText);
dateText.datepicker(); //initializing the datepicker on newly added text field
<!DOCTYPE html>
<html>
<head>
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="js/addInput.js" charset="UTF-8"></script>
<script>
$(document)
.ready(
function() {
var counter = 2;
$("#addBtn")
.click(
function() {
var newRowDiv = $(
document
.createElement('div'))
.attr("class", 'row');
var newStartDateLabel = $(
document
.createElement('div'))
.attr("class", 'col-md-2');
var newStartDateInput = $(
document
.createElement('div'))
.attr("class", 'col-md-2 input-group input-daterange');
newStartDateLabel
.appendTo(newRowDiv);
newStartDateLabel.after().html(
"Start Date " + counter);
var dateText = $('<input id="startDate' + counter + '" name="startDate' + counter + '" type="text" class="form-control" >');
newStartDateInput
.insertAfter(
newStartDateLabel)
.html(dateText);
dateText.datepicker(); //initializing the datepicker on newly added text field
newRowDiv.appendTo(".container");
counter++;
});
});
</script>
</head>
<body>
<form id="form" name="form" action="DateServlet" method="POST">
<div class="container">
<div class="row">
<div class="col-md-2">
Start Date 1
</div>
<div class="col-md-2 input-group input-daterange">
<input id="startDate1" name="startDate1" type="text" class="form-control">
</div>
</div>
</div>
<button id="addBtn" type="button" class="btn btn-default">Add</button>
</form>
<script type="text/javascript">
$('.input-daterange input').each(function() {
$(this).datepicker("clearDates");
});
</script>
</body>
</html>
I am trying to create some actions for my datepickers with jquery bu i cannot.
The actions that i try to make work are:
Out field to be with one day after In field
Form is:
<label>Check In</label>
<div class="datepicker-wrap">
<input type="text" name="In" id="In" class="input-text full-width" placeholder="aa/ll/zz" />
</div>
<label>Check Out</label>
<div class="datepicker-wrap">
<input type="text" id="Out" name="Out"class="input-text full-width" placeholder="aa/ll/zz" />
</div>
Script is:
<script type="text/javascript">
$(document).ready(function(){
$("#Out").datepicker();
$("#In").datepicker({
onSelect: function(){
var fecha = $(this).datepicker('getDate');
$("#Out").datepicker("setDate", new Date(fecha.getTime() + 24 * 60 * 60 * 1000));
}
});
});
</script>
Scripts loaded are:
<!-- Javascript -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.noconflict.js"></script>
<script type="text/javascript" src="js/modernizr.2.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<script type="text/javascript" src="js/jquery-ui.1.10.4.min.js"></script>
The script works on jsfiddle but on my site doeas not :(
http://www.bookingassist.ro/site
I am using a timepicker to select the time with an interval of 15 minutes. I use the timepicker from this link.
I am unable to add the timepicker to the input text field using the onclick function. Here is some sample code of what I am trying to achieve. Please help me solve this issue.
index.html
<link rel="stylesheet" href="include/jquery-ui-1.8.14.custom.css" type="text/css" />
<link rel="stylesheet" href="jquery.ui.timepicker.css?v=0.3.0" type="text/css" />
<script type="text/javascript" src="include/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="include/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js?v=0.3.0"></script>
<style type="text/css">
.st{}
.et{}
#bod { font-size: small; margin:0px 0px 0px 0px; }
body{font-size:10px;}
......
<div id="bod">
<input type="text" id="timepicker_start1" value="" class="st"/>
<input type="text" id="timepicker_end1" value="" class="et"/>
</div>
<input type="button" id="Add" name="Add" value="Add" onClick="add()" />
<input type="hidden" id="tot" name="tot" value="1"/>
...
The javascript part of the page is:
<script type="text/javascript">
function add(){
var tot=document.getElementById("tot").value;
tot=parseInt(tot,10);
var i=tot+1;
$('#bod').append(i+". ");
var s=$('<input/>').attr({type:'text',id:'timepicker_start'+i}).addClass('st').appendTo("#bod");
var s1=$('<input/>').attr({type:'text',id:'timepicker_end'+i}).addClass('et').appendTo("#bod");
$('#bod').append(" ");
$('#timepicker_start'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
$('#timepicker_end'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
document.getElementById("tot").value=i;
}
$(document).ready(function(e) {
$('#timepicker_start1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
$('#timepicker_end1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
});
</script>
You got a typo: it's timepicker not timpicker.
Other than that you're good - the script is working - http://jsfiddle.net/FNww8/