1

这是我需要修复要求的片段

在这里，我使用 jquery 作为 datepicker

          <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes
           /base/jquery-ui.css" />
          <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
          <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

在这里，我让 datepicker 通过下拉列表选择月份，但问题是在两个字段中，用户可以选择月份，但我需要限制“to”字段中的月份选择，因为第二个 datepicker 应该显示“from field”本身的月份

$(document).ready(function () {
    $("#datepicker,#datepicker1").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-0:c+10",
        dateFormat: "dd - M - yy"
    });
    $('#datepicker,#datepicker1').datepicker("setDate", new Date());
});

这是两个日期选择器，有两个字段名“from”和“to” 

           <li><label class="label">From:</label></li>
               <li><input name="fdate" type="text" class="sel" size="10"  
                      id="datepicker" required /><li>
               <li><label class="label1">To:</label></li>
               <li><input name="tdate" type="text" class="sel" size="10"  
                      id="datepicker1" required  /><li>
               <li ><label class="label" >Weeks:</label></li>
4

3 回答 3

0

我正在使用的小脚本....试试这个

var startDateTextBox = $('#datepicker');
    var endDateTextBox = $('#datepicker1');

    startDateTextBox.datepicker({
            changeYear: true,
            yearRange : 'c-30:c',
            dateFormat:"yy-mm-dd", 
            onClose: function(dateText, inst) {
                if (endDateTextBox.val() != '') {
                    var testStartDate = startDateTextBox.datepicker('getDate');
                    var testEndDate = endDateTextBox.datepicker('getDate');
                    if (testStartDate > testEndDate)
                        endDateTextBox.datepicker('setDate', testStartDate);
                }
                else {
                    endDateTextBox.val(dateText);
                }
            },
            onSelect: function (selectedDate){
                endDateTextBox.datepicker('option', 'minDate', startDateTextBox.datepicker('getDate') );
            }
    });
    endDateTextBox.datepicker({
            changeYear: true,
            yearRange : 'c-30:c',
            dateFormat:"yy-mm-dd",  
            onClose: function(dateText, inst) {
                if (startDateTextBox.val() != '') {
                    var testStartDate = startDateTextBox.datepicker('getDate');
                    var testEndDate = endDateTextBox.datepicker('getDate');
                    if (testStartDate > testEndDate)
                        startDateTextBox.datepicker('setDate', testEndDate);
                }
                else {  
                    startDateTextBox.val(dateText);
                }
            },
            onSelect: function (selectedDate){
                startDateTextBox.datepicker('option', 'maxDate', endDateTextBox.datepicker('getDate') );
            }
    });
于 2013-06-26T09:04:44.617 回答
0

以下是上述要求的片段......

<head>
    <title>Testing</title>
    <link href="css/jquery-ui-start-custom-1.10.3.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .ui-datepicker-next, .ui-datepicker-prev { display: none; }
    </style>
    <script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-custom-1.10.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('.ui-datepicker-prev ui-corner-all').hide();
            $("#datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "-0:c+10",
                dateFormat: "dd - M - yy",
                onClose: function(selectedDate) {
                    $('#datepicker1').datepicker("setDate", selectedDate);
                }
            });
            $('#datepicker').datepicker("setDate", new Date());

            $("#datepicker1").datepicker({
                yearRange: "-0:+0",
                dateFormat: "dd - M - yy"
            });

        });
    </script>
</head>
于 2013-06-26T09:01:04.900 回答
0

希望它能给你一个想法......

$(document).ready(function() {
    $(function() {
        $( "#fromDate" ).datepicker({
             yearRange: "-50:+20",dateFormat: 'dd/mm/yy',showOn: "button",changeMonth: true,changeYear: true,
                buttonImage:""+appctx``+"/images/index.jpeg" ,buttonImageOnly: true ,buttonText: "",autoSize:true ,
            onSelect: function( selectedDate ) {
                 $( "#toDate" ).datepicker( "option", "minDate", selectedDate ); 
            },
            changeMonth: true,
            changeYear: true
        });
    });

        $( "#toDate" ).datepicker({
             yearRange: "-50:+20",dateFormat: 'dd/mm/yy',showOn: "button",changeMonth: true,changeYear: true,
                buttonImage:""+appctx+"/images/index.jpeg" ,buttonImageOnly: true ,buttonText: "",autoSize:true ,
            onSelect: function( selectedDate ) {
                 $( "#fromDate" ).datepicker( "option", "maxDate", selectedDate ); 
            },
            changeMonth: true,
            changeYear: true
        });
    });
于 2013-06-26T09:09:25.910 回答