web-dev-qa-db-ja.com

jQueryDatepicker-ホバー時に日付を取得

this jQuery datepickerを使用していて、ホバーした日付の値を取得しようとしています。プラグインにパラメータがあるようです：

eventNameThe desired event to trigger the date picker. Default: 'click'

ドキュメントが非常に限られているので、クリック以外に他のオプションがあるかどうか疑問に思います。ない場合は、eventNameを使用してホバー時に値を取得するにはどうすればよいですか。

javascriptjquerydatepickerhover
15
eozzy

eventNameオプションは、内部のshowメソッドをイベントにバインドするためにのみ使用されます。

_$(this).bind(options.eventName, show);
_

理論的には、hoverを使用して日付ピッカーを表示できますが、eventNameオプションに_'mouseenter mouseleave'_を指定する必要があります。 hover は_'mouseenter mouseleave'_にバインドするjQueryショートカットメソッド。

kayak.co.in で動作を見つけたいと（コメントで）述べているので、mouseenterハンドラーをチェーンするだけでこれを模倣できます。 _.DatePicker_呼び出しの後（他に変更は必要ありません）：

_$('#date').DatePicker({
    // options...
}).on('mouseenter', '.datepickerDays td:not(.datepickerDisabled, .datepickerNotInMonth)', function (e) { // delegating on the mouseenter event which jQuery patches to be a cross-browser event, and only targeting clickable dates
    var target = $(this).children('a'), // cache lookup
        options = target.parents('.datepicker').data('datepicker'), // get DatePicker options
        current = new Date(options.current), // grab the current month/year
        val = parseInt(target.text(), 10), // grab the target date
        hoverVal = new Date(current.getFullYear(), current.getMonth(), val), // make into an actual date
        hoverDay = hoverVal.getDayName(), // get the short day name
        hoverM = hoverVal.getMonth() + 1, // and month
        hoverD = hoverVal.getDate(), // and date
        hoverText = hoverDay + ' ' + (hoverD < 10 ? '0' + hoverD : hoverD) + '/' + hoverM, // for a formatted text value
        selectedVal = new Date(options.date[0]), // get the selected date (which may just be the initial date without an actual selection or an actual selected date, hereafter "selected")
        selectedDay = selectedVal.getDayName(), // get the short day name
        selectedM = selectedVal.getMonth() + 1, // and month
        selectedD = selectedVal.getDate(), // and date
        selText = selectedDay + ' ' + (selectedD < 10 ? '0' + selectedD : selectedD) + '/' + selectedM, // for a formatted text value
        startDate = $('#startDate').data('lastHovered') || new Date(hoverVal) || selectedVal, // default to: last hovered, current hover, or "selected" date (in that order)
        endDate = $('#endDate').data('lastHovered') || new Date(options.date[1]) || startDate, // default to: last hovered, actual selected date, or "selected" date (in that order)
        startDateSelected = $('#startDate').data('startDateSelected') || $('.datepickerDays .datepickerSelected.first').length > 0, // test whether an actual date was selected
        endDateSelected = !isNaN(options.date[1]) && (options.date[1] - options.date[0] > 86400000), // test whether an end date was selected. end date is set in options when start date is actually selected and is the same day as the selected start date but the time is set to 23:59:59
        selector; // variable to store a selector string
    // no end date has been selectd AND if no start date has been selected, or if it has and the user is hovering over an earlier date, or if the user hasn't selected a date yet
    if (!endDateSelected && (!startDateSelected || (startDateSelected && hoverVal < selectedVal) || hoverVal <= startDate)) {
        selector = '#startDate'; // use the startDate input
        $('#endDate').val(''); // since using startDate, endDate has not been selected. make sure the input is cleared.
    } else if (!endDateSelected){ // otherwise, as long as no end date has been selected
        selector = '#endDate'; // use the endDate input
        $('#startDate').val(selText); // and set the value of startDate back to the actual selected date value
    }
    if (!endDateSelected) { // if the user hasn't picked an end date (which cannot be picked without a start date)
        $(selector).data({ // persist the last hovered date and whether a start date has been selected
            "lastHovered": hoverVal,
            "startDateSelected": startDateSelected // this is necessary as the plugin routinely destroys and recreates the tables that make up the calendars while navigating the calendars
        }).val(hoverText); // set the value of the input to the hovered date
    }
});
_

作業デモ： http://jsfiddle.net/QgXNn/5/

12
pete

editedここで作業中のフィドル、あなたから分岐しました。

// setting the value of the input field to hovered date
// Note that we're not triggering the "click" event bec. 
// it will cause the onChange event of the datepicker to be fired. 
// Instead, we're setting and resetting the input field value 
$("body").on("mouseover", ".datepickerDays td", function (e) {
    var d = parseInt($(this).text(), 10),
        my = $(this).closest('table').find('.datepickerMonth span').html().split(', '),
        m = $.inArray(my[0], MONTH_NAMES),
        y = parseInt(my[1], 10),
        date = new Date(y, m, d),
        textbox = $('#startDate').hasClass('focus') ? $('#endDate') : $('#startDate');
    textbox.val(getFormattedDate(date));
});

// We set back the input field back to its original value on mouseout
$("body").on("mouseout", ".datepickerDays td", function (e) {
    var fd = $('#date').DatePickerGetDate(false),
        start = getFormattedDate(fd[0]),
        end = getFormattedDate(fd[1]);
    $('#startDate').val(start);
    $('#endDate').val(end);
});

// ----------------------------------------
// HELPER FUNCTIONS & VARS
// ----------------------------------------

var MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
function pad0(num) { return num < 10 ? '0' + num : num; }
function getFormattedDate(date) {
    if (isNaN(date.getTime())) { return ''; }
    var wd = WEEKDAYS[date.getDay()].substr(0, 3);
    return wd + ' ' + pad0(date.getDate()) + '/' + pad0(date.getMonth() + 1);
}
3
Onur Yıldırım

このアプローチを試してください：

ホバーターゲットのDivを作成します

<div id="content">
    <div id="test">Hover Me</div>
    <div id="datePicker"></div>
</div>

準備ができたら、初期化してホバーイベントにバインドして開きます

$(function () {
    $('#datePicker').datepicker();
    $('#datePicker').hide();

    $('#content').hover(function () {
        $('#datePicker').fadeIn('fast');
    }, function () {
        $('#datePicker').fadeOut('fast');
    });

});

Fiddle （ピッカーを参照できなかったため、JQuery UIを使用しました）

更新：新しいフィドルをチェックしてください

私はあなたのフィドルに私のアプローチを適用しました。これで、「Hover Me」にカーソルを合わせるとDatePickerが表示され、カーソルが離れると消えます。追加した：

$(function () {
    $('#date').hide();
    $('#test').hover(function () {
        $('#date').show();
    }, function () {
        $('#date').hide();
    });

});

-

ところで、ホバーしないと、効果のためにDatePickerダイアログが消えるようにしました。隣接するものを削除することで簡単に変更できます

}, function () {
    $('#date').hide();
3
Dave Alperovich

あなたの質問のために。日付ピッカーをホバーに表示したくないが、値または日付をホバーの入力ボックスに表示したいと思います。日付ピッカーをホバーに表示したい場合は、プラグインのeventName属性に「mouseover」を使用してみてください。

$('.inputDate').DatePicker({
    eventName:'mouseover', // This is the event to fire.
    format:'m/d/Y',
    date: $('#inputDate').val(),
    current: $('#inputDate').val(),
    starts: 1,
    position: 'right'});

ホバーのjqueryイベントを取得しません。

ここで、datepicker要素にカーソルを合わせたときに入力タグに新しい日付を表示します。プラグイン自体を微調整して、この行734を見つけようとする必要があるかもしれません。コードは

var cal = $(tpl.wrapper).attr('id', id).bind('click', click).data('datepicker', options);

に変更します

var cal = $(tpl.wrapper).attr('id', id).bind('mouseover', click).data('datepicker', options);

ご覧のとおり、jqueryの「Hover」キーワードではなく、古いマウスオーバーイベントを使用しました。これが機能する場合は、プラグインに「callon：click」などの新しいオプションパラメータを追加して、呼び出し時にこのオプションを設定して、この行734に渡すこともできます。

var cal = $(tpl.wrapper).attr('id', id).bind(options.callon, click).data('datepicker', options);

これを使用して、テキストボックスの値を更新するために呼び出す独自のイベントを設定できます。それは確かに単一の日付ピッカーで機能します。それを試して、これについてコメントしてください。ただし、クリックの日付を設定するために、さらに操作する必要がある場合もあります。

1
SSS

プラグインはすでにchange関数をclickにバインドしているので、hoverのイベントをアタッチし、それをトリガーするだけで使用できます。だから次のようなもの：

function make_hover(){
    $(".datepickerDays td span").hover(function(e){
        $(this).trigger("click")
    })
    $(".datepickerDays td").mouseup(function(e){
        $('#inputDate').DatePickerHide(); //hide it when click actually occurs
    })
    $(".datepickerContainer").mouseup(function(e){
        setTimeout(function(){
          make_hover()
        },0) //have to run this with setTimeout to force it to run after DOM changes
    })
}

var date=$('#inputDate').DatePicker({
    format:'m/d/Y', 
    date: $('#inputDate').val(),
    current: $('#inputDate').val(),
    eventName: 'mouseenter',
    onBeforeShow: function(){
        $('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
        make_hover()
    },
    onChange: function(formated, dates){
        $('#inputDate').val(formated);
        make_hover()
    }
})

例

1
mfirdaus

JQueryおよびjQueryUIを使用する場合：

<div id="date_div">
     <input type="text" id="test" placeholder="Hover Me"/>
    <div id="datePicker"></div>
</div>

<script>
jQuery(function($) {
    $('#datePicker').datepicker({
       onSelect: function(dat){
          $('#test').val(dat);
       }
    });
    $('#datePicker').hide();

    $('#date_div').hover(function(){
         $('#datePicker').fadeIn(200);
    }, function() {
         $('#datePicker').fadeOut(200);
    });
});
</script>

デモを確認@： http://jsfiddle.net/renishar/ZVf48/4/

jQueryおよびjQueryUIライブラリも含まれます。

0
ReNiSh A R

'hover'の代わりにeventName'mouseover 'を使用します

0
Rohit

日付要素をホバーするときに委任を使用できます。その場合は、要素自体を強制的にクリックします。

コード：

$("body").delegate(".datepickerDays td span","hover",function(e){
    $(this).click();
})

プラグインを新しいバージョンのjQueryで動作させることができないため、使用する必要があります delegate

デモ： http://jsfiddle.net/IrvinDominin/fFc7h/

0
Irvin Dominin