All geek questions in one place

Specific dates in DatePicker

I am using datepicker in an MVC4 application.

But I want to select only a specific range in DatePicker. Because now there is a drop-down list where the user can select a date. But the dropdown should be replaced by a dumper.

I have a method for AvailableDates, for example:

 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);
        }

And this is the jQuery from DatePicker:

; (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);

But how to use this method in DatePicker?

thank

But how to use this part:

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 ]
    }
});

In a DatePicker plugin?

thank

I try like this:

; (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);

But then by date I get the message: Expected identifier

if I do it as follows:

 ; (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);

Then I get this error:

Uncaught ReferenceError: array is not defined

but if I do it like this:

 ; (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);

Dates that are in the array can also be selected

thank

I am trying to call a method using an ajax call, for example:

 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"
                        })

But $ .ajax is not recognized.

thank

I also tried this way to call the method. method class name: 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>

, :

GetAvailableDates
+4
1

beforeshowday datepicker. -

JQuery UI datepicker.

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"
})
+1

Source: https://habr.com/ru/post/1599042/

More articles:


All Articles