(function( $ ) {
$( 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
});
});
})( jQuery );
<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>
<div class="control-group">
<label class="control-label" for="lastName">Last Name</label>
<div class="controls">
<input id="lastName" type="text" class="input-xlarge">
</div>
</div>
<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="control-group">
<label class="control-label" for="anniversary">Anniversary</label>
<div class="controls">
<input id="anniversary" 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>
.well { margin: 10px; }
External resources loaded into this fiddle: