jQuery Datepicker Range with Cloned Form Elements

Question

I have a dynamic form that can be cloned, but the Datepicker Custom Range function limits every clone's end date from the first start date element.

I am using the SheepIt! plugin to clone my form elements.

Working example: http://jsfiddle.net/YWdV7/15/

*Note: add/delete functions not working in fiddle, but example of date range limits as previously described

Initial function for first date fields and clone function:

<script type="text/javascript">
$(document).ready(function() {

    var container = $('#container').sheepIt(
    {
            separator: '',
            allowRemoveLast: true,
            allowRemoveCurrent: false,
            allowRemoveAll: false,
            allowAdd: true,
            allowAddN: false,
            maxFormsCount: 10,
            minFormsCount: 0,
            iniFormsCount: 1
        }   
        );
    });

    $(function() {
        $( ".date" ).datepicker({   
            showOn: "both",
            buttonImage: "../../media/icons/calendar.png",          
            changeMonth: true,
            changeYear: true,
            yearRange: '2011:2050',
            beforeShow: customRange 
        }); 
    });

    function customRange(input) {
        if ($(input).hasClass('end_date')) {
            var minDate = new Date($('.start_date').val());
            minDate.setDate(minDate.getDate() + 1)
            return {
                minDate: minDate
            };
        }
    };
</script>

Function to re-initiate datepicker when clone button is pressed:

<script type="text/javascript">
$('#container_add').live('click', function() {  
    $('.date').datepicker({
        showOn: "both",
        buttonImage: "../../media/icons/calendar.png",          
        changeMonth: true,
        changeYear: true,
        yearRange: '2011:2050',
        beforeShow: customRange 
    })

    function customRange(input) {
        if ($(input).hasClass('end_date')) {
            var minDate = new Date($('.start_date').val());
            minDate.setDate(minDate.getDate() + 1)
            return {
                minDate: minDate
            };
        }
    };

});
</script>

Answer 1

A few things about your code:

• $(function() {}) is the same as $(document).ready(function() {}).
• customRange(input) only needs to be defined once. If defined multiple times, the latest defined one will override the previous ones (just like re-assigning a variable).
• In customRange(input), you really want to get the corresponding .start_date, not just any .start_date. So, you should use $(input).prevAll('.start_date') instead of $('.start_date').
• To keep the code DRY, you can reuse the datepicker options.

Here is an example: http://jsfiddle.net/william/YWdV7/18/.