I am trying to create a date range where after selecting start_date the end_date will only allow the user to choose dates after the start_date and vice versa. Here is a code snippet:
main.js
function set_parameters() {
var date_start_input=$('#start_date');
var date_end_input=$('#end_date');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options_start={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_end_input.datepicker("option", "maxDate", selectedDate);
}
};
var options_end={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_start_input.datepicker("option", "minDate", selectedDate);
}
};
date_start_input.datepicker(options_start);
date_end_input.datepicker(options_end);
};
$(document).ready(function() {
set_parameters();
});
index.html
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
</head>
...
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
...
I tried solutions from a couple of topics yet none of them worked for me. I believe that the most important things are to set max and min date when the change is made in dates.
There is a couple of errors in your code:
the datepicker has no option onSelect, instead you have to listen for changeDate event
the datepicker has neither minDate nor maxDate option/method, you have to use setStartDate and setEndDate
Here a working example:
function set_parameters() {
var date_start_input = $('#start_date');
var date_end_input = $('#end_date');
var container = $('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left'
};
date_start_input.datepicker(options).on('changeDate', function(e){
date_end_input.datepicker("setStartDate", e.date);
});
date_end_input.datepicker(options).on('changeDate', function(e){
date_start_input.datepicker("setEndDate", e.date);
});
};
$(document).ready(function() {
set_parameters();
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
I think the code you need is this:
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
This is not my code. I found it here: https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers.
It looks like maybe you were just missing a closing parenthesis in your document ready function
$(document).ready(function() {
set_parameters();
}
function set_parameters() {
var date_start_input=$('#start_date');
var date_end_input=$('#end_date');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options_start={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_end_input.datepicker("option", "maxDate", selectedDate);
}
};
var options_end={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_start_input.datepicker("option", "minDate", selectedDate);
}
};
date_start_input.datepicker(options_start);
date_end_input.datepicker(options_end);
};
$(document).ready(function() {
set_parameters();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
</head>
...
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
You can also read more about jQuery UI Datepicker here if you didn't already know about it.
Related
I just want to show current date and time on text field and even wants to select dates..
Here is my faild code:
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var optComponent = {
format: 'mm-dd-yyyy',
container: '#datePicker',
orientation: 'auto top',
todayHighlight: true,
autoclose: true
};
// COMPONENT
$('#datePicker').datepicker(optComponent);
$('#datePicker').datepicker('setDate', today);
<div class="form-group">
<div class="input-group date" id="datePicker">
<input type="text" class="form-control" name="date" value="">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
Your code is working fine you are missing date picker js
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var optComponent = {
format: 'mm-dd-yyyy',
container: '#datePicker',
orientation: 'auto top',
todayHighlight: true,
autoclose: true
};
// COMPONENT
$('#datePicker').datepicker(optComponent);
$('#datePicker').datepicker('setDate', today);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<div class="form-group">
<div class="input-group date" id="datePicker">
<input type="text" class="form-control" name="date" value="">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
#Joe
Try using below code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
</head>
<body onload="myFunction()">
Date: <input type="text" class="datepicker" id="demo"/>
<script>
function myFunction() {
$(document).ready(function(){
var todaydatetime = new Date();
$(".datepicker" ).datepicker({
dateFormat : 'dd-mm-yy',
defaultDate: new Date()
});
$(".datepicker").attr('value', todaydatetime);
});
}
</script>
</body>
</html>
I hope above information will be useful for you.
Thank you.
My date picker is working but I want to add birthday text in the input box. please help
Here is my code:
$(function() {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
});
<div class="inputField half">
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly />
<span class="input-group-addon"><i class="material-icons">date_range</i>
</span>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
If I understand what do you need, You could simply do something like this(just change the value of input):
$(function() {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true,
}).datepicker('update', new Date());
$('#datepicker input').val('birthday: ' + $('#datepicker input').val());
});
then wrap updating input value in some update-callback if you need etc.
https://jsfiddle.net/re9zpu2g/
Trying to show both calendar next to each other inline and not popping up on click on the input. Using bootstrap slider
$('.input-daterange input').each(function() {
$(this).datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years",
updateViewDate: false
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div class="input-group input-daterange">
<input type="text" class="form-control" value="2012-04-05">
<div class="input-group-addon">to</div>
<input type="text" class="form-control" value="2012-04-19">
</div>
This is how I use the inline with a single calendar but I can't manage to make it for date range and two calendars:
<div id="sandbox-container"><div></div></div>
$('#sandbox-container div').datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years",
updateViewDate: false
});
I tried the following but it place three calendars, the first div with 2 one next to each other and the second div with only one calendar
$('.input-daterange div').each(function() {
$(this).datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years",
updateViewDate: false
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div class="input-group input-daterange">
<div></div>
<div></div>
<input type="hidden" class="form-control" value="2012-04-05">
<div class="input-group-addon">to</div>
<input type="hidden" class="form-control" value="2012-04-19">
</div>
Hope this helps. Some CSS file is missing.
Note : If it helps, see my answer here to select a range in a single datepicker.
$('.input-daterange input').each(function() {
$(this).datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years",
updateViewDate: false
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<div class="input-group input-daterange">
<input type="text" class="form-control" value="2012-04-05">
<div class="input-group-addon">to</div>
<input type="text" class="form-control" value="2012-04-19">
</div>
This is how I resolevd it eventually:
$('#sandbox-container').datepicker({
format: "yyyy",
startView: 1,
viewMode: "years",
minViewMode: "years",
minViewMode: "years",
multidate: true,
multidateSeparator: ", ",
autoClose: true,
}).on("changeDate",function(event){
var dates = event.dates, elem = $('#sandbox-container');
if(elem.data("selecteddates") == dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2) dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div id="sandbox-container">
<input name="usp-custom-14" id="usp-custom-14" type="text">
</div>
How to display full datetime picker in the screen. I tried position:relative but not working. Please help me..
HTML code :
<div style="position:relative">
<div class="input-group date form_startdatetime" data-date-format="dd M yyyy - HH:ii P" data-link-field="dtp_startdate">
<input class="form-control" size="16" type="text" name="sDateTime" tabindex="7">
</div>
</div>
<script type="text/javascript" src="./datetimepicker3/jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./datetimepicker3/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./datetimepicker3/datetimepicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript">
$('.form_startdatetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
</script>
See picture of output..
From Your comment, I see this in the documentation.
pickerPosition
String. Default: 'bottom-right' (other value supported : 'bottom-left')
This option is currently only available in the component implementation. With it, you can place the picker just under the input field.
I am adding a sample example for better understanding of Positioning.
<div class="input-append date form_datetime">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
autoclose: true,
todayBtn: true,
pickerPosition: "bottom-left"
});
</script>
I have the following code in my view:
<input type="text" class="form-control" id="date-from" name="date-from" value="" placeholder="Van" data-class="datepicker" />
I would like to retrieve the value of this field via AJAX for filtering.
The default format for input is mm/dd/yyyy (which i can't change either...)
So I tried getting the results in the format yyyy-mm-dd as i want them.
The following are my lines in javascript, they all return the exact input (mm/dd/yyyy)
alert($('#date-from').datepicker({ format: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ format: 'yyyy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yyyy-mm-dd' }).val());
Here is an example of a datepicker that outputs in yyyy-mm-dd Does that help?
$(function() {
$('#datepicker').datepicker({
onSelect: function(date) {
alert(date);
},
dateFormat: 'yyyy-mm-dd',
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="datepicker"></div>
Yo can use alt-format http://api.jqueryui.com/datepicker/#option-altFormat
. And then in your ajax call you can read value form hidden field that have date value in your desired format.
$(function(){
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#altdate',
altFormat: 'yy-mm-dd'
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date Field : <input id="datepicker" type="text" /><br />
Alt Hidden Field : <input id="altdate" type="text" /><br />
<input id="thesubmit" type="button" value="Submit" />
Or you can use manually do that by splitting string on the basis of "-" and the reverse it
$(function () {
$("#datepicker").datepicker({
dateFormat: "dd-mm-yy",
});
$("#datepicker").change(function () {
var currentDate = $("#datepicker").val();
console.log("Desired format : ",currentDate.split("-").reverse().join('-'));
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="datepicker" type="text">