jQuery UI calendario con rango de fecha, lo mas simple

by Wilzon Mariño Bueno

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<input type="text" name="date_from" id="date_from" />        
<input type="text" name="date_to" id="date_to" />

JavaScript

$(function() {
    $("#date_from").datepicker({
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 1,
        showOn: "both",//button
        //buttonImage: '<?php echo drupal_get_path('module', 'wilzonmb');  ?>/img/calendar-icon.png',
        //buttonText: '',
        buttonImageOnly: false,//true only image
        showAnim: "slideDown",
        dateFormat: "yy-mm-dd",
        onClose: function(selectedDate) {
            $("#date_to").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#date_to").datepicker({
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 1,
        showOn: "both",//button
        //buttonImage: '<?php echo drupal_get_path('module', 'wilzonmb');  ?>/img/calendar-icon.png',
        //buttonText: '',
        buttonImageOnly: false,//true only image
        showAnim: "slideDown",
        dateFormat: "yy-mm-dd",
        onClose: function(selectedDate) {
            $("#date_from").datepicker("option", "maxDate", selectedDate);
        }
    });
});