jQuery DatePicker with default date

Here’s how you could use jQuery’s Datepicker component within your HTML. There are 2 variations of Datepicker. One is normal date picker where user would select a date from the calendar. The other one is a readonly date field that would default the current date and is readonly.

<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="static/css/menu.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  assignDates();
});
var assignDates = function(){
  $( "#expiration_date" ).datepicker({
    changeMonth: true,
    changeYear: true
  });
  $( "#creation_date" ).datepicker({
    changeMonth: true,
    changeYear: true
  });
  $( "#creation_date" ).datepicker('setDate', new Date());
};
</script>

<div class="pure-control-group">
    <label for="expiration_date">Expiration Date</label>
    <input id="expiration_date" type="text" placeholder="Expiration Date" required>
    <span class="pure-form-message-inline">*</span>
</div>

<div class="pure-control-group">
    <label for="creation_date">Creation Date</label>
    <input id="creation_date" type="text" onmousedown="return false;" readonly>
</div>

Working samples available on GitHub

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s