jquery ui datepicker與範圍選擇

我想在我的asp.net aspx頁面上使用jQuery UI datepicker。我想在jQuery UI日曆上選擇一個範圍和一個OK按鈕。我找到了一個鏈接，以及在那裏做到這一點：jquery ui datepicker與範圍選擇

jQuery UI Datepicker - Range Selection with Only One Control

但是當我使用此頁面上的代碼，然後單擊文本框，近4日曆的水平出現加樣式搞砸。我不確定這個頁面需要哪些文件，哪些是額外的。

請建議如何使用這樣的jQuery UI日期選擇器。

來源

2014-01-07 DotnetSparrow

你能提供你的代碼或演示jsfiddle？ –

我第一次創建jsfiddle，不知道如何加載relted文件文件。請檢查這個http://jsfiddle.net/gVt3K/ – DotnetSparrow

從提供的鏈接開始，我用相關的代碼構建了一個jsfiddle。我看不到你面臨的問題。

代碼：

$.datepicker._defaults.onAfterUpdate = null; 

var datepicker__updateDatepicker = $.datepicker._updateDatepicker; 
$.datepicker._updateDatepicker = function (inst) { 
    datepicker__updateDatepicker.call(this, inst); 

    var onAfterUpdate = this._get(inst, 'onAfterUpdate'); 
    if (onAfterUpdate) onAfterUpdate.apply((inst.input ? inst.input[0] : null), [(inst.input ? inst.input.val() : ''), inst]); 
} 

$(function() { 

    var cur = -1, 
     prv = -1; 
    $('#jrange div') 
     .datepicker({ 
     //numberOfMonths: 3, 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 

     beforeShowDay: function (date) { 
      return [true, ((date.getTime() >= Math.min(prv, cur) && date.getTime() <= Math.max(prv, cur)) ? 'date-range-selected' : '')]; 
     }, 

     onSelect: function (dateText, inst) { 
      var d1, d2; 

      prv = cur; 
      cur = (new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)).getTime(); 
      if (prv == -1 || prv == cur) { 
       prv = cur; 
       $('#jrange input').val(dateText); 
      } else { 
       d1 = $.datepicker.formatDate('mm/dd/yy', new Date(Math.min(prv, cur)), {}); 
       d2 = $.datepicker.formatDate('mm/dd/yy', new Date(Math.max(prv, cur)), {}); 
       $('#jrange input').val(d1 + ' - ' + d2); 
      } 
     }, 

     onChangeMonthYear: function (year, month, inst) { 
      //prv = cur = -1; 
     }, 

     onAfterUpdate: function (inst) { 
      $('<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" data-handler="hide" data-event="click">Done</button>') 
       .appendTo($('#jrange div .ui-datepicker-buttonpane')) 
       .on('click', function() { 
       $('#jrange div').hide(); 
      }); 
     } 
    }) 
     .position({ 
     my: 'left top', 
     at: 'left bottom', 
     of: $('#jrange input') 
    }) 
     .hide(); 

    $('#jrange input').on('focus', function (e) { 
     var v = this.value, 
      d; 

     try { 
      if (v.indexOf(' - ') > -1) { 
       d = v.split(' - '); 

       prv = $.datepicker.parseDate('mm/dd/yy', d[0]).getTime(); 
       cur = $.datepicker.parseDate('mm/dd/yy', d[1]).getTime(); 

      } else if (v.length > 0) { 
       prv = cur = $.datepicker.parseDate('mm/dd/yy', v).getTime(); 
      } 
     } catch (e) { 
      cur = prv = -1; 
     } 

     if (cur > -1) $('#jrange div').datepicker('setDate', new Date(cur)); 

     $('#jrange div').datepicker('refresh').show(); 
    }); 

});

演示：http://jsfiddle.net/IrvinDominin/LALED/

來源

2014-01-07 12:36:44

-3

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Datepicker - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script> 
$(function() { 
$("#datepicker").datepicker(); 
}); 
</script> 
</head> 
<body> 
<p>Date: <input type="text" id="datepicker"></p> 
</body> 
</html>

試試這個。

來源

2014-01-07 12:10:31 Dipak

它會允許範圍選擇，如我發佈的鏈接？ – DotnetSparrow

是的，只要複製它，並嘗試它在一個簡單的date.html文件它將工作。日期範圍。 – Dipak

來源：<input type="text" name="date_from" id="date_from" />
要：<input type="text" name="date_to" id="date_to" />

$(function() { 
    $("#date_from").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     showOn: "button",   
     showAnim: "slideDown", 
     dateFormat: "yy-mm-dd", 
     onClose: function(selectedDate) { 
      $("#date_to").datepicker("option", "minDate", selectedDate); 
     } 
    }); 
    $("#date_to").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     showOn: "button",   
     showAnim: "slideDown", 
     dateFormat: "yy-mm-dd", 
     onClose: function(selectedDate) { 
      $("#date_from").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
});

鏈接演示：http://jsfiddle.net/wimarbueno/fpT6q/1/

來源

2014-04-25 16:12:09 wimarbueno

jquery ui datepicker與範圍選擇

回答

相關問題