Skip to content

Instantly share code, notes, and snippets.

@momin-riyadh

momin-riyadh/date.html

Created August 11, 2025 04:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save momin-riyadh/bacc5ef1f2d1dcd7672e07c4f7100eda to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save momin-riyadh/bacc5ef1f2d1dcd7672e07c4f7100eda to your computer and use it in GitHub Desktop.
Download ZIP
Raw
date.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI Datepicker with Custom Placeholders</title>
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/ui-lightness/jquery-ui.min.css">
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
.date-input {
width: 100%;
max-width: 300px;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s ease;
}
.date-input:focus {
outline: none;
border-color: #007cba;
box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}
.date-input::placeholder {
color: #999;
font-style: italic;
}
.example-section {
margin-bottom: 40px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
border-left: 4px solid #007cba;
}
.example-section h3 {
margin-top: 0;
color: #007cba;
}
.selected-date {
margin-top: 10px;
padding: 10px;
background-color: #e7f3ff;
border-radius: 4px;
border: 1px solid #b3d9ff;
display: none;
}
.ui-datepicker {
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
border: 1px solid #ddd;
}
.ui-datepicker-header {
background: linear-gradient(135deg, #007cba, #005a8b);
border: none;
color: white;
}
.ui-datepicker-title {
color: white;
}
.ui-datepicker-prev, .ui-datepicker-next {
background: rgba(255,255,255,0.2);
border: none;
}
.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
background: rgba(255,255,255,0.3);
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery UI Datepicker with Custom Placeholders</h1>
<div class="example-section">
<h3>Example 1: MM/DD/YYYY Format</h3>
<div class="form-group">
<label for="datepicker1">Birth Date:</label>
<input type="text" id="datepicker1" class="date-input" placeholder="MM/DD/YYYY">
<div id="selected-date1" class="selected-date"></div>
</div>
</div>
<div class="example-section">
<h3>Example 2: DD/MM/YYYY Format</h3>
<div class="form-group">
<label for="datepicker2">Event Date:</label>
<input type="text" id="datepicker2" class="date-input" placeholder="DD/MM/YYYY">
<div id="selected-date2" class="selected-date"></div>
</div>
</div>
<div class="example-section">
<h3>Example 3: YYYY-MM-DD Format</h3>
<div class="form-group">
<label for="datepicker3">Project Start Date:</label>
<input type="text" id="datepicker3" class="date-input" placeholder="YYYY-MM-DD">
<div id="selected-date3" class="selected-date"></div>
</div>
</div>
<div class="example-section">
<h3>Example 4: Full Month Name Format</h3>
<div class="form-group">
<label for="datepicker4">Anniversary Date:</label>
<input type="text" id="datepicker4" class="date-input" placeholder="Month DD, YYYY">
<div id="selected-date4" class="selected-date"></div>
</div>
</div>
<div class="example-section">
<h3>Example 5: With Date Range Restrictions</h3>
<div class="form-group">
<label for="datepicker5">Meeting Date (Next 30 days only):</label>
<input type="text" id="datepicker5" class="date-input" placeholder="Select date within next 30 days">
<div id="selected-date5" class="selected-date"></div>
</div>
</div>
</div>
<!-- jQuery and jQuery UI JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
// Example 1: MM/DD/YYYY format
$("#datepicker1").datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
yearRange: "1900:+10",
showAnim: "slideDown",
onSelect: function(dateText, inst) {
$("#selected-date1").html("<strong>Selected Date:</strong> " + dateText).show();
}
});
// Example 2: DD/MM/YYYY format
$("#datepicker2").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
yearRange: "c-10:c+10",
showAnim: "fadeIn",
onSelect: function(dateText, inst) {
$("#selected-date2").html("<strong>Selected Date:</strong> " + dateText).show();
}
});
// Example 3: YYYY-MM-DD format
$("#datepicker3").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
yearRange: "c-5:c+5",
showAnim: "show",
onSelect: function(dateText, inst) {
$("#selected-date3").html("<strong>Selected Date:</strong> " + dateText).show();
}
});
// Example 4: Full month name format
$("#datepicker4").datepicker({
dateFormat: "MM dd, yy",
changeMonth: true,
changeYear: true,
yearRange: "c-50:c+10",
showAnim: "slideDown",
onSelect: function(dateText, inst) {
$("#selected-date4").html("<strong>Selected Date:</strong> " + dateText).show();
}
});
// Example 5: With date restrictions (next 30 days only)
$("#datepicker5").datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: false,
minDate: 0, // Today
maxDate: "+30D", // 30 days from today
showAnim: "bounce",
beforeShowDay: function(date) {
// Disable weekends (optional)
var day = date.getDay();
return [(day != 0 && day != 6), ''];
},
onSelect: function(dateText, inst) {
$("#selected-date5").html("<strong>Selected Date:</strong> " + dateText).show();
}
});
// Clear selected date display when input is cleared
$(".date-input").on("input", function() {
var targetDiv = "#selected-date" + this.id.slice(-1);
if ($(this).val() === "") {
$(targetDiv).hide();
}
});
// Add focus/blur effects
$(".date-input").focus(function() {
$(this).parent().find('label').css('color', '#007cba');
}).blur(function() {
$(this).parent().find('label').css('color', '#555');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment