0

私はjquery ui daterange datepicker http://jqueryui.com/demos/datepicker/#date-rangeを使用しています私のコードはそれの下にあり、ほとんどデフォルトの初期化です。「to」入力フィールドの値を今日の日付にし、「from」入力フィールドの値を 30 日前にしたいと思います。とにかく、これらの入力値を動的に設定する方法が見つかりませんでした。助けていただければ幸いです

ありがとう

<div id="date-wrapper">
<script>
$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        dateFormat: "M d, yy",
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "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>
<label for="from"></label>
<input type="text" id="from" name="from"/><span style="font-weight:bold;font-size:15px;">-</span>
<label for="to"></label>
<input type="text" id="to" name="to"/>
</div>
</div>
4

2 に答える 2

3

2 つのフィールドを別々に開始する必要があります。ただし、再利用のために設定をオブジェクトに保存できます。

JavaScript は次のようになります。

var settings = {
    dateFormat: "M d, yy",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(
            instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        $("#from, #to").not(this).datepicker("option", option, date);
    }
};
$("#to").datepicker(settings);
$("#from").datepicker($.extend({}, settings, { defaultDate: '-30d'}));

実際の動作をご覧ください: http://jsfiddle.net/william/xtATL/。

編集：

ユーティリティ関数$.datepicker.formatDate(format, date, settings)を使用して、入力に表示される日付をフォーマットできます。

$("#to").val(function() {
    return $.datepicker.formatDate('M d, yy', new Date(), settings);
});
$("#from").val(function() {
    var thirtyDaysAgo = new Date().getTime() - 30 * (1000*60*60*24);
    return $.datepicker.formatDate('M d, yy', new Date(thirtyDaysAgo), settings);
});

更新された例を参照してください: http://jsfiddle.net/william/xtATL/4/。

于 2011-09-11T07:28:36.337 に答える
0

日付ピッカーを初期化する前に（正しい日付形式を使用して）入力に日付を設定するか、初期化後に日付ピッカーの場合はsetDateメソッドを使用します。例えば

var d = new Date（）; jQuery（ "＃to）.datepicker（" setDate "、d）;

于 2011-09-11T10:23:13.860 に答える