有没有办法在bootstrap datapicker中使用函数设置maxDate或minDate？

时间：2017-09-12 00:01:24

标签： twitter-bootstrap bootstrap-datetimepicker eonasdan-datetimepicker

我正在寻找一些非常简单的东西，但是我没有在这里和bootstrap datetimepicker文档中找到它。

这个想法非常简单。我有两个日期时间字段，当前将在从服务器检索到的page_load中具有值。

现在我想确保第一个日期的maxDate是第二个日期值，第二个日期的minDate是第一个日期的日期。

这是我的代码：

var msArrayXAxis = ["0-20", "20-50", "50-100", "100-200", "<200"]
barChartView.isUserInteractionEnabled = false
barChartView.noDataText = "You need to provide data for the chart."
barChartView.legend.enabled = false
barChartView.chartDescription?.text = ""

barChartView.xAxis.labelPosition = XAxis.LabelPosition.bottom
barChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: msArrayXAxis)

barChartView.xAxis.axisMinimum = 0
barChartView.xAxis.granularity = 1
barChartView.xAxis.labelCount = msArrayXAxis.count
barChartView.xAxis.centerAxisLabelsEnabled = true

barChartView.xAxis.spaceMin = 0.3
barChartView.xAxis.labelWidth = 1
barChartView.rightAxis.drawGridLinesEnabled = false
barChartView.rightAxis.drawAxisLineEnabled = false
barChartView.rightAxis.drawLabelsEnabled = false

func parsedArrayCount(case1: Array<Double>,case2: Array<Double>,case3: Array<Double>,case4: Array<Double>, case5: Array<Double>) -> [BarChartDataEntry] {
    var dataEntries1: [BarChartDataEntry] = []

    NSLog("Parsing array count")

    let dataEntry = BarChartDataEntry(x: Double(0), y:Double(case1.count))
    dataEntries1.append(dataEntry)

    let dataEntry2 = BarChartDataEntry(x: Double(1), y:Double(case2.count))
    dataEntries1.append(dataEntry2)

    let dataEntry3 = BarChartDataEntry(x: Double(2), y:Double(case3.count))
    dataEntries1.append(dataEntry3)

    let dataEntry4 = BarChartDataEntry(x: Double(3), y:Double(case4.count))
    dataEntries1.append(dataEntry4)

    let dataEntry5 = BarChartDataEntry(x: Double(1), y:Double(case5.count))
    dataEntries1.append(dataEntry5)

    return dataEntries1
}

func updateGraph() {
    var dataEntries1: [BarChartDataEntry] = []
    var dataEntries2: [BarChartDataEntry] = []
    var dataEntries3: [BarChartDataEntry] = []

    barChartView.clear()
    NSLog("updating graph..")

    let name  = Analyzer.sharedInstance.nameArray(names: rArray.map{String($0)}, Name: nameArray)

    let cData = parserArrays(rArray: name.first.map {Double($0)!})
    let wData = parserArrays(rArray: name.last.map {Double($0)!})
    let vData = parserArrays(rArray: name.middle.map {Double($0)!})

    dataEntries1 = parsedArrayCount(case1: cData.case1, case2: cData.case2, case3: cData.case3, case4: cData.case4, case5: cData.case5)
    dataEntries2 = parsedArrayCount(case1: wData.case1, case2: wData.case2, case3: wData.case3, case4: wData.case4, case5: wData.case5)
    dataEntries3 = parsedArrayCount(case1: vData.case1, case2: vData.case2, case3: vData.case3, case4: vData.case4, case5: vData.case5)

    let chartDataSet = BarChartDataSet(values: dataEntries1, label: "")
    chartDataSet.colors = [UIColor.blue]

    let chartDataSet1 = BarChartDataSet(values: dataEntries2, label: "")
    chartDataSet1.colors = [UIColor.green]

    let chartDataSet2 = BarChartDataSet(values: dataEntries3, label: "")
    chartDataSet2.colors = [UIColor.orange]

    NSLog("Data set1 \(dataEntries1)")

    let groupSpace = 0.1
    let barSpace = 0.05
    let barWidth = 0.25

    let dataSets: [BarChartDataSet] = [chartDataSet,chartDataSet1, chartDataSet2]
    let chartData = BarChartData(dataSets: dataSets)
    chartData.setDrawValues(false)
    chartData.barWidth = barWidth

    let gg = chartData.groupWidth(groupSpace: groupSpace, barSpace: barSpace)
    barChartView.xAxis.axisMaximum = Double(0) + gg * Double(msArrayXAxis.count)
    chartData.groupBars(fromX:0.0, groupSpace: groupSpace, barSpace: barSpace)
    barChartView.notifyDataSetChanged()
    barChartView.data = chartData
    barChartView.animate(yAxisDuration: 0.5)
}

它有很多代码，但我正在寻找的是如何在datetimepicker的第一次打开时设置这些规则。所以，我想在属性maxDate和minDate上执行e函数，但似乎不起作用！

知道如何解决这个问题吗？

$(document).ready(function () { $('[id^="datetimepickerStartDate"]').datetimepicker({ useCurrent: false, format: applicationDateTimeFormat, ignoreReadonly: true, //maxDate: function() { // var id = $(this).attr('id'); // var str = id.split("_"); // if (str.length <= 1) { // var secondDateTimePicker1 = $('#datetimepickerFinishDate').data("DateTimePicker").date(); // if (secondDateTimePicker1.length) { // return secondDateTimePicker1; // } // return null; // } else { // var secondDateTimePicker2 = $("#datetimepickerFinishDate_" + str[1]).data("DateTimePicker").date(); // if (secondDateTimePicker2.length) { // return secondDateTimePicker2; // } // return null; // } //}, locale: locale }); $('[id^="datetimepickerFinishDate"]').datetimepicker({ useCurrent: false, format: applicationDateTimeFormat, ignoreReadonly: true, //minDate: function () { // var id = $(this).attr('id'); // var str = id.split("_"); // if (str.length <= 1) { // var secondDateTimePicker1 = $('#datetimepickerStartDate').data("DateTimePicker").date(); // if (secondDateTimePicker1.length) { // return secondDateTimePicker1; // } // return null; // } else { // var secondDateTimePicker2 = $("#datetimepickerStartDate_" + str[1]).data("DateTimePicker").date(); // if (secondDateTimePicker2.length) { // return secondDateTimePicker2; // } // return null; // } //}, //minDate: new Date().setHours(0, 0, 0, 0), locale: locale }); $('[id^="datetimepickerStartDate"]') .on("dp.change", function (e) { var id = $(this).attr('id'); var str = id.split("_"); if (str.length <= 1) { $('#datetimepickerFinishDate').data("DateTimePicker").minDate(e.date); } else { $("#datetimepickerFinishDate_" + str[1]).data("DateTimePicker").minDate(e.date); $(id).datetimepicker('hide'); } }); $('[id^="datetimepickerFinishDate"]') .on("dp.change", function (e) { var id = $(this).attr('id'); var str = id.split("_"); if (str.length <= 1) { $('#datetimepickerStartDate').data("DateTimePicker").maxDate(e.date); } else { $("#datetimepickerStartDate_" + str[1]).data("DateTimePicker").maxDate(e.date); $(id).datetimepicker('hide'); } $(id).datetimepicker('hide'); }); }); 事件仅在第一次更改日期时有效...

1 个答案:

答案 0 :(得分：0)

你过于复杂了，你所看到的基本上是： 1）第一个选择器的maxDate是在第二个选择器上选择的值。 2）在第二个选择器上选择的minDate是具有第一个选择器的minDate。

所以，官方网页上有一个例子：http://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

但是由于你对页面的负载有价值，我有这个通用的脚本：

function AplicarLinkedDatePicker() {
    var $Min = $('.datetimepickerMin');
    var $Max = $('.datetimepickerMax');

    var valInputMax = $Max.children(':input').val();
    var valInputMin = $Min.children(':input').val();

    var format = 'DD/MM/YYYY';

    $Min.datetimepicker({
        format: format,
        useCurrent: false,

    });

    $Max.datetimepicker({
        format: format,
        useCurrent: false,
    });

    $Min.on("dp.change", function (e) {
        $Max.data("DateTimePicker").minDate(e.date);
    });

    $Max.on("dp.change", function (e) {
        $Min.data("DateTimePicker").maxDate(e.date);
    });

    if (valInputMin != null) {
        $Max.data("DateTimePicker").minDate(moment(valInputMin, format).startOf('day'));
    }

    if (valInputMax != null) {
        $Min.data("DateTimePicker").maxDate(moment(valInputMax, format).endOf('day'));
    }


}

那么以上所做的一切是什么？它将检查是否有一个值与选择器相关的输入并设置相应的minDate和maxDate，如果没有它将被忽略并默认设置。

相关问题
最新问题