Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Just In Time Initialization of jQuery UI Date Picker On Focus
$( 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
});
});
<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>
$( 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
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.