标签：json c asp-net-mvc datepicker xforms

我在MVC4应用程序中使用了一个datepicker.

但我想在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中使用该方法？

谢谢

但是如何使用这件作品：

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

解决方法:

您可以在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"
})

标签：json,c,asp-net-mvc,datepicker,xforms
来源： https://codeday.me/bug/20190708/1399629.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。