Just In Time Initialization of jQuery UI Date Picker On Focus

fiddle-slow.js

$( document ).ready( function() {

    $( "input.date" ).datepicker({
        minDate: moment().subtract( "months", 1 ).toDate(),
        maxDate: moment().add( "months", 1 ).toDate(),
        dateFormat: "d M, y",
        constrainInput: true,
        beforeShowDay: $.datepicker.noWeekends
    });

});

fiddle.html

<form class="form-horizontal well">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="firstName">First Name</label>
            <div class="controls">
                <input id="firstName" type="text" class="input-xlarge">
            </div>
        </div>
        <!-- More HTML... -->
        <div class="control-group">
            <label class="control-label" for="birthday">Birthday</label>
            <div class="controls">
                <input id="birthday" type="text" class="date input-xlarge">
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button class="btn">Cancel</button>
        </div>
    </fieldset>
</form>

fiddle.js

$( document ).on( "focus", "input.date:not(.hasDatepicker)", function() {
    toastr.info( "Initializing " + this.id );

    $( this ).datepicker({
        minDate: moment().subtract( "months", 1 ).toDate(),
        maxDate: moment().add( "months", 1 ).toDate(),
        dateFormat: "d M, y",
        constrainInput: true,
        beforeShowDay: $.datepicker.noWeekends
    });
});