c# - DatePicker 中的特定日期

标签 c# json asp.net-mvc datepicker xforms

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

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

我有一个用于 AvailableDates 的方法,如下所示:

 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 中使用该方法呢?

谢谢

但是这 block 怎么用:

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>

这是日期选择器:

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

什么还必须从该方法返回唯一可用的日期:

GetAvailableDates

最佳答案

您可以在日期选择器中查看 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"
})

关于c# - DatePicker 中的特定日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31558036/

相关文章:

c# - 从 MVC 4 ASP.NET 应用程序发送电子邮件

c# - 更改 DataServiceContext 中的最大消息大小

c# - 套接字在一定时间后受到限制

python - 在 Python Django 中使用 Json

java - 如何将文件夹和子文件夹列表转换为 JSOn 格式

javascript - 在数据库中存储格式化内容的标准方法是什么?

c# - Xamarin 表单按钮在 iOS 上带有文本和矢量图像

c# - System.Object 中的 protected 成员有什么意义?

javascript - 您可以使用 javascript (ECMAScript5) 中的对象文字表示法指定其他描述符属性吗?

asp.net-mvc - 如何将 Linux 托管的 Wordpress 博客 at/blog 添加到现有的 Windows 托管网站?