Question

我在MVC4应用程序中使用了一个日期选择器。

但我想在DatePicker中只选择一个特定的范围。因为现在有一个下拉列表，用户可以在其中选择日期。但是下拉列表必须由日期选择器替换。

我有一个可用日期的方法，如下所示：

 public AvailableDates GetAvailableDates(string branchPublicId, string servicePublicId)
        {
            HttpWebRequest httpRequest = CreateHttpRequest("calendar-backend/public/api/v1/branches/" + branchPublicId + "/services/" + servicePublicId + "/dates", HttpMethod.Get, "application/json");
            string json = Get(httpRequest);
            return JsonConvert.DeserializeObject<AvailableDates>(json);
        }

这是DatePicker的JQuery：

; (function ($) {
    $(function () {
        $("form.xforms-form").bind({
            XForms_Enrich: function (e) {
                if ($.fn.datepicker) {
                    $("input.qmatic-dateslot", e.args.data).each(function () {
                        var inp = $(this);
                        if (inp.is(":disabled")) return;
                        var tabindex = inp.attr("tabindex");

                        var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'dd-MM';
                        dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');

                        $("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);

                        var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
                        inp.after(clearBtn);

                        inp.datepicker({
                            dateFormat: dateFormat,
                            changeMonth: true,
                            changeYear: false,
                            showWeek: true,
                            firstDay: 1,
                            yearRange: "c-100:c+15",
                            showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                        })
                    });
                    $("#ui-datepicker-div").hide();
                }
            }
        })
    })
})(jQuery);

但是如何在DatePicker中使用该方法？

谢谢

但如何使用这件作品：

var array = ["2013-03-14","2013-03-15","2013-03-16"]

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    }
});

在DatePicker插件中？

谢谢

我这样试试：

; (function ($) {
    $(function () {
        $("form.xforms-form").bind({
            XForms_Enrich: function (e) {
                if ($.fn.datepicker) {

                    var array = ["2013-03-14", "2013-03-15", "2013-03-16"]
                    $("input.qmatic-dateslot", e.args.data).each(function () {

                        beforeShowDay: function(date){
                            var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                            return [ array.indexOf(string) == -1 ]
                        }



                        var inp = $(this);
                        if (inp.is(":disabled")) return;
                        var tabindex = inp.attr("tabindex");

                        var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'dd-MM';
                        dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');

                        $("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);

                        var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
                        inp.after(clearBtn);

                        inp.datepicker({
                            dateFormat: dateFormat,
                            changeMonth: true,
                            changeYear: false,
                            showWeek: true,
                            firstDay: 1,
                            yearRange: "c-100:c+15",
                            showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                        })
                    });
                    $("#ui-datepicker-div").hide();
                }
            }
        })
    })
})(jQuery);

但是到了日期，我收到了消息：预期标识符

如果我这样做：

 ; (function ($) {
        $(function () {
            $("form.xforms-form").bind({
                XForms_Enrich: function (e) {
                    if ($.fn.datepicker) {
                        $("input.qmatic-dateslot", e.args.data).each(function () {

                            //var array = ["2013-03-14", "2013-03-15", "2013-03-16"]
                            var inp = $(this);
                            if (inp.is(":disabled")) return;
                            var tabindex = inp.attr("tabindex");

                            var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'd-M-yy';
                            dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');

                            $("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);

                            var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
                            inp.after(clearBtn);

                            inp.datepicker({
                                dateFormat: dateFormat,
                                changeMonth: true,
                                beforeShowDay: function (date) {
                                    var arr = ["2015-03-14", "2015-03-15", "2015-03-16"]; // Should be your json array of dates coming from server
                                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                                    return [array.indexOf(string) == -1]
                                },
                                changeYear: false,
                                showWeek: true,
                                firstDay: 1,
                                yearRange: "c-100:c+15",
                                showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                            })
                        });
                        $("#ui-datepicker-div").hide();
                    }
                }
            })
        })
    })(jQuery);

然后我收到此错误：

Uncaught ReferenceError: array is not defined

但如果我这样做：

 ; (function ($) {
        $(function () {
            $("form.xforms-form").bind({
                XForms_Enrich: function (e) {
                    if ($.fn.datepicker) {
                        $("input.qmatic-dateslot", e.args.data).each(function () {

                            var array = ["2013-03-14", "2013-03-15", "2013-03-16"]
                            var inp = $(this);
                            if (inp.is(":disabled")) return;
                            var tabindex = inp.attr("tabindex");

                            var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'd-M-yy';
                            dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');

                            $("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);

                            var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
                            inp.after(clearBtn);

                            inp.datepicker({
                                dateFormat: dateFormat,
                                changeMonth: true,
                                beforeShowDay: function (date) {
                                    //var arr = ["2015-03-14", "2015-03-15", "2015-03-16"]; // Should be your json array of dates coming from server
                                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                                    return [array.indexOf(string) == -1]
                                },
                                changeYear: false,
                                showWeek: true,
                                firstDay: 1,
                                yearRange: "c-100:c+15",
                                showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                            })
                        });
                        $("#ui-datepicker-div").hide();
                    }
                }
            })
        })
    })(jQuery);

阵列中的日期也是可选择的

谢谢

我尝试使用ajax调用调用该方法，如下所示：

 inp.datepicker({
                            dateFormat: dateFormat,
                            changeMonth: true,
                            $.ajax({

                                type: "GET",
                                url: "QMatic/GetAvailableDates",
                                data: dataString,
                                dataType: "json",




}),


                            beforeShowDay: function (date) {
                                var array = ["2015-03-14", "2015-03-15", "2015-03-16"];  
                                var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                                return [array.indexOf(string) == -1];
                            },
                            changeYear: false,
                            showWeek: true,
                            firstDay: 1,
                            yearRange: "c-100:c+15",
                            showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                        })

但$ .ajax无法识别。

谢谢

我也尝试过这样，调用方法。方法的类名是：QMatic：

  inp.datepicker({
                            dateFormat: dateFormat,
                            changeMonth: true,


                                type: "GET",
                                url: "~/QMatic/GetAvailableDates",
                                data: dataString,
                                dataType: "json",

                            //beforeShowDay: function (date) {
                            //    var array = ["2015-03-14", "2015-03-15", "2015-03-16"];  
                            //    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                            //    return [array.indexOf(string) == -1];
                            //},
                            changeYear: false,
                            showWeek: true,
                            firstDay: 1,
                            yearRange: "c-100:c+15",
                            showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"

                        })

我也在使用xforms，如下所示：

 <xf:select1 ref="serviceid" incremental="true">
                <xf:label>Selecteer product</xf:label>
                <xf:item>
                  <xf:label>
                    <xf:output value="concat('(',exf:label(.),')')" />
                  </xf:label>
                  <xf:value></xf:value>
                </xf:item>
                <xf:itemset nodeset="instance('qmatic')/services/item">
                  <xf:label ref="name" />
                  <xf:value ref="value" />
                </xf:itemset>
                <xf:action ev:event="xforms-value-changed">
                  <xf:setvalue ref="../dateslot" value="''" />
                  <xf:setvalue ref="../timeslot" value="''" />
                  <xf:setvalue ref="instance('qmatic')/dateslots/@result" value="qmatic:getavailabledates(instance('qmatic')/dateslots, instance('')/afspraak/branchid, instance('')/afspraak/serviceid)" />
                </xf:action>
              </xf:select1>


                <xf:input ref="dateInputQmatic" incremental="true" class="qmatic-dateslot">
                    <xf:label>Selecteer datum</xf:label>
                    <xf:action ev:event="xforms-value-changed">
                        <xf:setvalue ref="../timeslot" value="''" />
                        <xf:setvalue ref="instance('qmatic')/timeslots/@result" value="qmatic:getavailabletimes(instance('qmatic')/timeslots, instance('')/afspraak/branchid, instance('')/afspraak/serviceid, instance('')/afspraak/dateslot)" />
                    </xf:action>
                </xf:input>

              <xf:select1 ref="dateslot" incremental="true">
                <xf:label>Selecteer datum</xf:label>
                <xf:item>
                  <xf:label>
                    <xf:output value="concat('(',exf:label(.),')')" />
                  </xf:label>
                  <xf:value></xf:value>
                </xf:item>
                <xf:itemset nodeset="instance('qmatic')/dateslots/item">
                  <xf:label ref="name" />
                  <xf:value ref="value" />
                </xf:itemset>
                <xf:action ev:event="xforms-value-changed">
                  <xf:setvalue ref="../timeslot" value="''" />
                  <xf:setvalue ref="instance('qmatic')/timeslots/@result" value="qmatic:getavailabletimes(instance('qmatic')/timeslots, instance('')/afspraak/branchid, instance('')/afspraak/serviceid, instance('')/afspraak/dateslot)" />
                </xf:action>
              </xf:select1>

所以这里是下拉列表中的可用日期：

 <xf:select1 ref="dateslot" incremental="true">
                <xf:label>Selecteer datum</xf:label>
                <xf:item>
                  <xf:label>
                    <xf:output value="concat('(',exf:label(.),')')" />
                  </xf:label>
                  <xf:value></xf:value>
                </xf:item>
                <xf:itemset nodeset="instance('qmatic')/dateslots/item">
                  <xf:label ref="name" />
                  <xf:value ref="value" />
                </xf:itemset>
                <xf:action ev:event="xforms-value-changed">
                  <xf:setvalue ref="../timeslot" value="''" />
                  <xf:setvalue ref="instance('qmatic')/timeslots/@result" value="qmatic:getavailabletimes(instance('qmatic')/timeslots, instance('')/afspraak/branchid, instance('')/afspraak/serviceid, instance('')/afspraak/dateslot)" />
                </xf:action>
              </xf:select1>

这是datepicker：

<xf:input ref="dateInputQmatic" incremental="true" class="qmatic-dateslot">
                    <xf:label>Selecteer datum</xf:label>                   
                </xf:input>

还必须从该方法返回唯一的availbe日期：

GetAvailableDates

Answer 1

您可以在datepicker中查看beforeshowday事件。请查看以下链接以获取示例 -

Jquery UI datepicker. Disable array of Dates

更新了代码

inp.datepicker({
    dateFormat: dateFormat,
    changeMonth: true,
    beforeShowDay: function(date){
        var arr = ["2013-03-14", "2013-03-15", "2013-03-16"] ; // Should be your json array of dates coming from server
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    },
    changeYear: false,
    showWeek: true,
    firstDay: 1,
    yearRange: "c-100:c+15",
    showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})

DatePicker中的特定日期

1 个答案: