ASP.NET MVC3中的句点范围选择控件

Question

我想实现类似于附加图像中提到的滑块。

我想要能够选择日期的滑块，如14/09至24/05。基本上， 我希望允许用户一次性选择此期间而不是创建多个期间 14/09至31 / dec和01/01至24/05。

如您所见，有两个滑块，第一个是“从”，第二个是“到”，用户可以移动每个滑块来调整周期选择。

是否有任何第三方控件（基于jquery的首选）以达到类似的效果？

Answer 1

您可以使用范围选项为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和to range选择动态隐藏或可见。