kartikparmar · October 24, 2024 08:28
diff --git a/datepicker.html b/datepicker.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Picker Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .date-list {
            list-style-type: none;
            padding: 0;
        }

        .date-list li {
            cursor: pointer;
            margin: 5px 0;
            padding: 10px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            width: 100px;
            text-align: center;
        }

        .date-list li:hover {
            background-color: #e0e0e0;
        }
    </style>
 </head>
 <body>

 <ul class="date-list">
    <li data-date="10/24/2024">October 24, 2024</li>
    <li data-date="11/15/2024">November 15, 2024</li>
    <li data-date="12/05/2024">December 5, 2024</li>
 </ul>

 <!-- Date Picker input -->
 <input type="text" id="booking_calender" />

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script>
    // Initialize the jQuery datepicker
    $(function() {
        $("#booking_calender").datepicker({
            dateFormat: 'mm/dd/yy', // Format to match the data-date in the list
            onSelect: function(selected,evnt) {
         alert( 'date is selected' );
    }
        });

        // When a date from the list is clicked, set it in the datepicker
        $(".date-list li").click(function() {
            var selectedDate = $(this).data("date");
            onSelect = $("#booking_calender").datepicker("setDate", selectedDate);
            // Manually trigger the onSelect function
            var onSelect = $("#booking_calender").datepicker("option", "onSelect");
            if (onSelect) {
                onSelect.call($("#booking_calender")[0], selectedDate);
            }
        });
    });
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Date Picker Example</title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<style>
	.date-list {
	list-style-type: none;
	padding: 0;
	}

	.date-list li {
	cursor: pointer;
	margin: 5px 0;
	padding: 10px;
	background-color: #f0f0f0;
	border: 1px solid #ddd;
	width: 100px;
	text-align: center;
	}

	.date-list li:hover {
	background-color: #e0e0e0;
	}
	</style>
	</head>
	<body>

	<ul class="date-list">
	<li data-date="10/24/2024">October 24, 2024</li>
	<li data-date="11/15/2024">November 15, 2024</li>
	<li data-date="12/05/2024">December 5, 2024</li>
	</ul>

	<!-- Date Picker input -->
	<input type="text" id="booking_calender" />

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
	// Initialize the jQuery datepicker
	$(function() {
	$("#booking_calender").datepicker({
	dateFormat: 'mm/dd/yy', // Format to match the data-date in the list
	onSelect: function(selected,evnt) {
	alert( 'date is selected' );
	}
	});

	// When a date from the list is clicked, set it in the datepicker
	$(".date-list li").click(function() {
	var selectedDate = $(this).data("date");
	onSelect = $("#booking_calender").datepicker("setDate", selectedDate);
	// Manually trigger the onSelect function
	var onSelect = $("#booking_calender").datepicker("option", "onSelect");
	if (onSelect) {
	onSelect.call($("#booking_calender")[0], selectedDate);
	}
	});
	});
	</script>

	</body>
	</html>