Interview Questions

jQuery Date Picker - Display Date range fields

The following is a JSP code to display date range fields using jQuery.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
<html>

<head>
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.6.1.min.js'/>"></script>

<script type="text/javascript" src="<c:url value='/jquery/jquery-ui-1.8.15.custom.min.js'/>"></script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>jQuery Date Picker Example</title>

<script type="text/javascript">
        $(function() {
                var dates = $( "#fromDate, #toDate" ).datepicker({
                        defaultDate: "+1w",
                        changeMonth: true,
                        numberOfMonths: 1,
                        dateFormat: "dd/M/yy" />",
                        changeYear: true,
                    gotoCurrent:true,
                    yearRange: '-50',
                        minDate: "-50Y",
                        maxDate: "0D",
                        showOn: "button",
                        buttonImage: "<c:url value='/images/calendar.gif'/>", // optional , provide custom image here
                        buttonImageOnly: true,
                        buttonText: 'Select Date',
                        onSelect: function( selectedDate ) {
                                var option = this.id == "fromDate" ? "minDate" : "maxDate",
                                        instance = $( this ).data( "datepicker" ),
                                        date = $.datepicker.parseDate(
                                                        instance.settings.dateFormat ||
                                                        $.datepicker._defaults.dateFormat,
                                                        selectedDate, instance.settings );
                                dates.not( this ).datepicker( "option", option, date );
                        }
                });
        });
</script>
</head>

<body>
<label for="fromDate"> Date From </label>

<input id="fromDate" name="fromDate" readOnly="true" type="text" value="" />

<label for="toDate"> Date To </label>

<input id="toDate" name="toDate" readOnly="true" type="text" value="" />
</body>

</html>