7

Jquery-UI datepicker で月に 1 つの日付のみを使用できるようにしようとしています。これは、選択した日付 + X 日を選択すると、毎月 1 日であり、別のテキスト入力フィールドにコピーする必要があります。

また、ドロップダウンで何を選択したかによって加算される日数が変わります。

私がこれまでに持っているものをいじる: http://jsfiddle.net/8y4Bf/

フィドルからのコード:

HTML

<div>
    <label>Select an Option:</label>
    <select id="select1">
        <option value="" disabled="disabled" selected="selected">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>
<br /><br />
<div>
    <label>Start Date:</label>
    <input type="text" id="startdate" />
    <br /><br />
    <label>End Date:</label>
    <input type="text" id="enddate" />
</div>

Jクエリ

$('#select1').change(function() {


    $('#startdate, #enddate').val("");


    if ($('#select1').val() == '1') {


        $('#startdate').datepicker({
            showButtonPanel: true,
            closeText: 'Close',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdate') {

                    // Parameters 1 day only & also copy result into enddate + 5 days
                }
            }
        });
    }

     else if ($('#select1').val() == '2') {


        $('#startdate').datepicker({
            showButtonPanel: true,
            closeText: 'Close',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdate') {

                   // Parameters 1 day only & also copy result into enddate + 7 days
                }
            }

            });

     }

});

http://jqueryui.com/datepicker/#min-maxのドキュメントを読みましたが、毎月 1 日のみを利用可能にする方法がわかりません。

そして、#startdateもう一度値を取得し、日数を追加してから貼り付ける#enddate必要がありますか、それともその値がどこかに保存されているので、そこから移動できますか?

4

1 に答える 1

10

テスト済みで動作しています！

  • のロジックを変更しましたjsfiddle。

  • 知っておくべきことは、必要なものを達成するために、に表示される日をdatepicker実装beforeShowDay functionする必要があることです。次に、選択した日を 5 日または 7 日を簡単に追加できるように型に変換する必要があります(たとえば、 30 日または 31 日と 5 日または 7 日を加えた各月の最終日を選択する場合、手動で行うと、他の月ではなく 36 日または 38 日になり、他にも多くの可能性があります。しかし、これはあなたの場合ではありません。説明しているだけです）。overridecomponentdateDate objectdate

  • も改善しましたcode。見てみましょう:

    ライブデモ: http://jsfiddle.net/oscarj24/q27EG/2/

jQuery コード:

$(function() {

    var extraDays = 0;
    var combobox = $('#select1');
    var txtStartDate = $('#startdate');
    var txtEndDate = $('#enddate');
    var inputs = txtStartDate.add(txtEndDate);

    combobox.on('change', function() {

        inputs.val('');

        var val = $(this).val();
        if(val == 1) extraDays = 5;
        if(val == 2) extraDays = 7;

        txtStartDate.datepicker({
            showButtonPanel: true,
            closeText: 'Close',
            dateFormat: 'mm/dd/yy',
            beforeShowDay: function(date) {

                /* Check for the first day */
                if (date.getDate() == 1) { return [true, '']; } 
                else { return [false, '', 'Unavailable']; }
            },
            onSelect: function(selected) {

                /* Add extra days to the date according to 'combobox' selection */
                var endDate = new Date(selected);
                endDate.setDate(endDate.getDate() + extraDays);

                var m = pad(endDate.getMonth() + 1, 2);
                var d = pad(endDate.getDate(), 2);
                var y = endDate.getFullYear();
                var endDateStr = [m, d, y].join('/');

                txtEndDate.val(endDateStr);
            }
        });

    });

});

/* This function just adds a zero to get this format: "01, 02, etc" in a number less than 10 */
function pad(number, length) {
    var str = '' + number;
    while (str.length < length) { str = '0' + str; }
    return str;
};
于 2013-10-31T23:35:42.847 に答える