Member Avatar for arafath077 
<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.?

Edited by arafath077
  • 2 Contributors
  • 5 Replies
  • 217 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by arafath077
Member Avatar for mark.suner 
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
Member Avatar for arafath077

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.

Member Avatar for mark.suner 
<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?

Edited by mark.suner
Member Avatar for arafath077 
<!-- 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.

Member Avatar for arafath077 
<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.