<html>
<body>
<div class="datepicker"><input type="text"></div>
<div class="datepicker"><input type="text"></div>
</body>
</html>
i want to select second datepicker's input filed in Jquery.?
arafath077 0 Light Poster
mark.suner 0 Newbie Poster
You can add ID in the input field
<div class="datepicker"><input id='firstDatepicker' type="text"></div>
<div class="datepicker"><input id='secondDatepicker' type="text"></div>
<script>
$(function(){
$('#firstDatepicker').datepicker()
$('#secondDatepicker').datepicker()
});
</script>
//hope it helps
arafath077 0 Light Poster
thank you for reply.
that was not i want.i need to select using css class.because im using same datepicker div two times in my project.
mark.suner 0 Newbie Poster
<body>
<div class="datepicker"><input value='1st' type="text"></div>
<div class="datepicker"><input value='2nd' type="text"></div>
</body>
<script type="text/javascript">
$(function(){
$('.datepicker').each(function(i, obj) {
if (i == 0) { // first div
alert($(this).find('input').val()); // first input field
}else if(i == 1){ // second div
alert($(this).find('input').val()); //second input field
}
});
});
</script>
I think this will work . .
If you're not satisfied may i see your codes and also
tell me what do you want to do with it?
arafath077 0 Light Poster
<!-- Datepicker 1 -->
<div class="">
<div class="col-xs-6 form-group">
<div class="datepicker-wrap">
<label>from</label>
<input type="text" class="form-control" placeholder="select date"
name="from" id="from" readonly/>
</div>
</div>
<div class="col-xs-6 form-group">
<div class="datepicker-wrap" id="">
<label>to</label>>
<input type="text" class="form-control" placeholder="select date"
name="to" id="to" readonly/>
</div>
</div>
</div>
<!-- Datepicker 2-->
<div class="">
<div class="col-xs-6 form-group">
<div class="datepicker-wrap">
<label>from</label>
<input type="text" class="form-control" placeholder="select date"
name="from2" id="from2" readonly/>
</div>
</div>
<div class="col-xs-6 form-group">
<div class="datepicker-wrap" id="">
<label>to</label>
<input type="text" class="form-control" placeholder="select date"
name="to2" id="to2" readonly/>
</div>
</div>
</div>
<script>
tjq.datepicker.setDefaults({
buttonImage: 'images/icon/blank.png',
buttonText: '',
buttonImageOnly: true,
dateFormat: 'dd/mm/yy',
defaultDate: +2,
minDate: 2,
maxDate: '+2y',
numberOfMonths: 2,
showAnim: 'fadeIn',
dayNamesMin: ["S", "M", "T", "W", "T", "F", "S"],
beforeShow: function (input, inst) {
var themeClass = tjq(input).parent().attr("class").replace("datepicker-wrap", "");
tjq('#ui-datepicker-div').attr("class", "");
tjq('#ui-datepicker-div').addClass("ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all");
tjq('#ui-datepicker-div').addClass(themeClass);
}
// showButtonPanel: true
});
// Set to datepicker options
tjq(function () {
tjq('#from').datepicker({
onSelect: function (instance) {
var nextDayDate = tjq('#from').datepicker('getDate', '+2d');
nextDayDate.setDate(nextDayDate.getDate() + 2);
tjq('#to').datepicker('setDate', nextDayDate);
},
onClose: function () {
tjq("#to").datepicker("show");
}
});
tjq('#to').datepicker({
beforeShow: customRange
});
function customRange(a) {
var b = new Date();
var c = new Date(b.getFullYear(), b.getMonth(), b.getDate());
if (a.id == 'to') {
if (tjq('#from').datepicker('getDate') != null) {
c = tjq('#from').datepicker('getDate');
}
}
return {
minDate: c
}
}
});
</script>
this is my code.i have two datepicker Range.so I wrote this code two time..can i make it one.
arafath077 0 Light Poster
<script>
tjq(function() {
tjq( "#from" ).datepicker({
changeMonth: true,
numberOfMonths: 2,
buttonImage: 'images/icon/blank.png',
buttonText: '',
buttonImageOnly: true,
dateFormat: 'dd/mm/yy',
defaultDate: +2,
minDate: 2,
maxDate: '+2y',
showAnim: 'fadeIn',
dayNamesMin: ["S", "M", "T", "W", "T", "F", "S"],
beforeShow: function (input, inst) {
var themeClass = tjq(input).parent().attr("class").replace("datepicker-wrap", "");
tjq('#ui-datepicker-div').attr("class", "");
tjq('#ui-datepicker-div').addClass("ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all");
tjq('#ui-datepicker-div').addClass(themeClass);
},
onClose: function( selectedDate ) {
tjq( "#to" ).datepicker( "option", "minDate", selectedDate).datepicker("show");
}
});
tjq( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
tjq( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
i found some more codes from internet..this also worked.but only one daterange
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.