c# – DatePicker中的特定日期

发布时间：2020-12-15 22:17:16 所属栏目：百科来源：网络整理

导读：我在MVC4应用程序中使用了一个datepicker. 但我想在DatePicker中只选择一个特定的范围.因为现在有一个下拉列表,用户可以在其中选择日期.但是下拉列表必须由日期选择器替换. 我有一个AvailableDates的方法,如下所示： public AvailableDates GetAvailableDate

我在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-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,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-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,'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,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]
                                },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",beforeShowDay: function (date) {
                                    //var arr = ["2015-03-14",showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                            })
                        });
                        $("#ui-datepicker-div").hide();
                    }
                }
            })
        })
    })(jQuery);

数组中的日期也是可选的

谢谢

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

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

                                type: "GET",url: "QMatic/GetAvailableDates",data: dataString,dataType: "json",}),beforeShowDay: function (date) {
                                var array = ["2015-03-14","2015-03-16"];  
                                var string = jQuery.datepicker.formatDate('yy-mm-dd',date);
                                return [array.indexOf(string) == -1];
                            },showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
                        })

但$.ajax无法识别.

谢谢

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

inp.datepicker({
                            dateFormat: dateFormat,type: "GET",url: "~/QMatic/GetAvailableDates",//beforeShowDay: function (date) {
                            //    var array = ["2015-03-14","2015-03-16"];  
                            //    var string = jQuery.datepicker.formatDate('yy-mm-dd',date);
                            //    return [array.indexOf(string) == -1];
                            //},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/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('(',')')" />
                  </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/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('(',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,beforeShowDay: function(date){
        var arr = ["2013-03-14","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 ]
    },showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!