Question

我正在为酒店活动创建功能，我使用jQuery UI datepicker输入两个字段，事件开始日期和事件结束日期。

所以，因为我似乎想要输入当前日期的开始，这意味着事件开始日期不能设置为过去的日期。那么你能告诉我如何通过编码完成它。

for example datepicker shown in this demo

Answer 1

$('#input').datepicker({ minDate : new Date() });会这样做。

看一个例子，道歉，我不能包含CSS文件

http://jsfiddle.net/xVAfP/

Answer 2

在脚本Jquery上：

var dates = $( "#date_init, #date_final" ).datepicker({
   onSelect: function( selectedDate ) {
        var option = this.id == "date_init" ? "maxDate" : "minDate",
        instance = $( this ).data( "datepicker" ),
        date = $.datepicker.parseDate(
            instance.settings.dateFormat ||
            $.datepicker._defaults.dateFormat,
            selectedDate, instance.settings d
        );
        dates.not( this ).datepicker( "option", option, date );
    }

});

输入：

使用PHP：

<input type="text" maxlength="10" name="date_final" id="date_final" value="<? echo  date('Y/m/d'); ?>" >

或者您可以使用javascript在输入时设置日期。！

再见。 www.estevaosoberano.com

Answer 3

<input type="text" id="tbStartDate" value="" disabled="disabled" />
<input type="text" id="tbEndDate" value="" disabled="disabled" />
<script type="text/javascript">
    $(document).ready(function () {
        $("#tbStartDate").datepicker({            
            dateFormat: 'dd-mm-yy',
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onSelect: function (dateText, inst) {
                var $endDate = $('#tbStartDate').datepicker('getDate');
                $endDate.setDate($endDate.getDate() + 1);
                $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
            },
            onClose: function (dateText, inst) {
                //$("#StartDate").val($("#tbStartDate").val());
            }
        });

        $("#tbEndDate").datepicker({
            dateFormat: 'dd-mm-yy',
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onClose: function (dateText, inst) {
                //$("#EndDate").val($("#tbEndDate").val());
            }
        });

            var $endDate = $('#tbStartDate').datepicker('getDate');
            $endDate.setDate($endDate.getDate() + 1);
            $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
    });
</script>

具有日期范围的jQuery UI Datepicker，从当前日期开始

3 个答案: