datepicker sa autofocusom
potrebno je uraditi da min datum u drugom datepickeru zavisi od izabranog datuma u prvom datepickeru
by BRANIS
HTML
<script src="https://dl.dropbox.com/u/7265587/jsfiddle/scripts/jquery-ui-1.9.2.custom.min.js"></script>
<link rel="stylesheet" href="https://dl.dropbox.com/u/7265587/jsfiddle/css/base.css">
<link rel="stylesheet" href="https://dl.dropbox.com/u/7265587/jsfiddle/css/skeleton.css">
<link rel="stylesheet" href="https://dl.dropbox.com/u/7265587/jsfiddle/css/layout.css">
<link rel="stylesheet" href="https://dl.dropbox.com/u/7265587/jsfiddle/css/chosen-custom.css">
<script src="https://dl.dropbox.com/u/7265587/jsfiddle/scripts/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://dl.dropbox.com/u/7265587/jsfiddle/css/jquery.ui.theme.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="well">
<form class="mainForm clearfix" action="someAction">
<button class="btn-trip" type="submit">One way</button>
<div class="row">
<div class="input-prepend pushRight"> <span class="add-on label">
<label for="select-from">From |</label>
</span>
<select id="select-from" data-placeholder="Type or select from list"
class="chzn-select-from" tabindex="1">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option...
JavaScript
$(function () {
// departing datepicker init
$("#dDate").datepicker({
onSelect: function (dateText, inst) {
// setting focus on next datepicker onSelect
setTimeout(function () {
$("#rDate").focus();
}, 100);
// setting min date in first datepicker
$("#rDate").datepicker("option", "minDate",
$("#dDate").datepicker("getDate"));
},
dateFormat: "D, d MM yy",
changeMonth: true,
minDate: 0
});
// returning datepicker init
$("#rDate").datepicker({
dateFormat: "D, d MM yy",
changeMonth: true,
// setting min date in second datepicker based on selected date in first datepicker
minDate: $("#dDate").datepicker("getDate")
});
});
// chosen init
$('#select-from, #select-to').chosen();
//positioning well on the page
var elementHeight = $('.well').height();
elementWidth = $('.well').outerWidth();
$('.well').css({
position: 'absolute',
top: '50%',
left: '50%',
width: '578px', // adjust width
height: elementHeight, // adjust height
zIndex: 1000,
marginTop: -(elementHeight / 1.1666), // half of height
marginLeft: -(elementWidth / 2) // half of width
});