ASP.NET MVC3中的期間範圍選擇控件

我想實現類似於我在附圖中提到的滑動條。ASP.NET MVC3中的期間範圍選擇控件

我想要能夠選擇日期像14/09至24/05的滑塊。所以基本上，我希望允許用戶一次性選擇這個時間段，而不是創建多個時間段，分別是09年9月31日至12月31日以及01/01/24/05期間的。

The one we did in asp.net webform

正如你可以看到，有兩個滑塊，第一個是「從」，以及第二個是「到」，用戶可以移動各滑塊調整週期選擇。

是否有任何第三方控件（基於jQuery的首選）如此實現類似的效果？

來源

2011-11-29 unruledboy

檢查此 - http://ghusse.github.com/jQRangeSlider/ – zero7

我通常使用jQuery UI演示中說明的一個！我也喜歡@ zero7指出的那個。但是，如果你正在尋找特定的用戶界面，將建議推出自己的實施。 – VinayC

jQRangeSlider看起來不錯，而且VinayC是正確的，我需要定製它。 zero7，請發佈您的答案，以便我可以結束這個問題 – unruledboy

您可以使用範圍選項爲false的Jquery Slider。以便您可以在範圍線上自由移動指針，並顯示重疊期創建另外兩個滑塊，並根據from和to來選擇動態隱藏和顯示它們。

function sliderOperatingControl(controlId, rangeVal, minVal, maxVal, valuesVal, slideLogic) { 
     $(controlId).slider({ 
      range: rangeVal, 
      min: minVal, 
      max: maxVal, 
      values: valuesVal, 
      slide: slideLogic 
     }); 
    } 
$(function() { 
sliderOperatingControl("#sliderFrom", false, 1, 365, [1, 365], function (event, ui) { 
      var strDate = returnDate(ui.values[0]) + " To " + returnDate(ui.values[1]); 
      $("#periodFromToLabel").html("Range: " + strDate); 
      $("#SliderDisplay").slider("values", 0, ui.values[0]); 
      $("#SliderDisplay").slider("values", 1, ui.values[1]); 
      if (ui.values[0] > ui.values[1]) { 
       $("#SliderDisplay").slider("values", 0, ui.values[0]); 
       $("#SliderDisplay").slider("values", 1, 365); 
       $("#SliderDisplay2").slider("values", 0, 0); 
       $("#SliderDisplay2").slider("values", 1, ui.values[1]); 
       $("#SliderDisplay2").show(); 
      } 
      else { 
       $("#SliderDisplay").slider("values", 0, ui.values[0]); 
       $("#SliderDisplay").slider("values", 1, ui.values[1]); 
       $("#SliderDisplay2").hide(); 
      } 

     }); 
});

因此，SliderDisplay和SliderDisplay2可以基於from和range範圍選擇動態製作隱藏或可見。

來源

2011-12-07 01:41:50 user928043

ASP.NET MVC3中的期間範圍選擇控件

回答

相關問題