I wanted to come out with a date range picker where shows in picture below. ideal output
Here is my updated code that I doing now and the output I have it now.
$(function() {
$("#fromperiod").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function(selectedDate) {
$("#toperiod").datepicker("option", "minDate", selectedDate);
}
});
$("#toperiod").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function(selectedDate) {
$("#fromperiod").datepicker("option", "maxDate", selectedDate);
}
});
});
.picker {
display: inline;
border: 1px solid lightgray;
padding : 4px;
}
input {
border: 0;
}
<link href=".11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src=".1.1/jquery.min.js"></script>
<script src=".11.4/jquery-ui.min.js"></script>
<table>
<tbody>
<tr>
<td>Period</td>
</tr>
<tr>
<td>
<div class='picker'>
<label for="fromperiod">From</label>
<input type="text" id="fromperiod" name="from">
<label for="toperiod">to</label>
<input type="text" id="toperiod" name="to">
</div>
</td>
</tr>
</tbody>
</table>
I wanted to come out with a date range picker where shows in picture below. ideal output
Here is my updated code that I doing now and the output I have it now.
$(function() {
$("#fromperiod").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function(selectedDate) {
$("#toperiod").datepicker("option", "minDate", selectedDate);
}
});
$("#toperiod").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function(selectedDate) {
$("#fromperiod").datepicker("option", "maxDate", selectedDate);
}
});
});
.picker {
display: inline;
border: 1px solid lightgray;
padding : 4px;
}
input {
border: 0;
}
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<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.11.4/jquery-ui.min.js"></script>
<table>
<tbody>
<tr>
<td>Period</td>
</tr>
<tr>
<td>
<div class='picker'>
<label for="fromperiod">From</label>
<input type="text" id="fromperiod" name="from">
<label for="toperiod">to</label>
<input type="text" id="toperiod" name="to">
</div>
</td>
</tr>
</tbody>
</table>
Here is my output based on the code. output
Share Improve this question edited Sep 27, 2015 at 6:47 DirtyBit 16.8k5 gold badges36 silver badges56 bronze badges asked Sep 18, 2015 at 7:16 susususu 1092 gold badges2 silver badges13 bronze badges 2- well its going to need some CSS styling to look like the output you want, have you tried anything? – BobbyTables Commented Sep 18, 2015 at 7:18
- @zedd i have try to do some changes in html code. but still the same. Can you provide some guide on the css styling part? – susu Commented Sep 18, 2015 at 8:20
3 Answers
Reset to default 5I was recently tasked with implementing a date range picker similar to the one in Google Analytics. After a bit of searching around I found this JQueryUI widget that works very well, and can be styled easily using JQueryUI's ThemeRoller.
Unless you're learning or practising, then using existing code, assets and libraries is almost always the best option. The phrases "Don't reinvent the wheel" and "Standing on the shoulders of giants" tend to get tossed around in classrooms and lecture halls for this very reason!
Please see the below example, I modified your code ..
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
.wrapper{
display : inline;
border:1px solid lightgray;
padding:4px;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.1)
}
input {
border:0;
}
label {
color : gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
Period :
<div class='wrapper'>
<label for="from">from:</label>
<input type="text" id="from" name="from">
<label for="to">to:</label>
<input type="text" id="to" name="to">
</div>
Here is an example on how you can style it, its creates a wrapping #picker
element that gets the shadow and border, then removes the childrens borders, and puts them in-line.
http://jsfiddle.net/truxwruj/
.picker > * {
display:inline;
border:0;
}
.picker {
border:1px solid lightgray;
padding:4px;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.1)
}