C# 日期选择器中的特定日期
我正在MVC4应用程序中使用日期选择器 但是我只想在日期选择器中选择一个特定的范围。因为现在有一个下拉列表，用户可以在其中选择日期。但是dropdownlist必须由日期选择器替换 我有一个可用数据的方法，如下所示：C# 日期选择器中的特定日期,c#,json,asp.net-mvc,datepicker,xforms,C#,Json,Asp.net Mvc,Datepicker,Xforms,我正在MVC4应用程序中使用日期选择器 但是我只想在日期选择器中选择一个特定的范围。因为现在有一个下拉列表，用户可以在其中选择日期。但是dropdownlist必须由日期选择器替换 我有一个可用数据的方法，如下所示： public AvailableDates GetAvailableDates(string branchPublicId, string servicePublicId) { HttpWebRequest httpRequest = Cr
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);
}
; (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);
; (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);
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"
})
<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>
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);
}
; (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);
; (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);
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"
})
<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>
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);
}
; (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);
; (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);
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"
})
<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>
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"
})
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);
}
; (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);
; (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);
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"
})
<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>
您可以在datepicker中查看beforeshowday事件。查看以下链接以获取示例- 更新代码
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"
})
嗨，Akhil，但是如何在Jquery插件中使用它呢？我编辑我的帖子。谢谢您需要添加“beforeShowDay”以及其他属性。谢谢。我拍了一张照片，效果很好。但现在如何使用这种方法。因为现在它是静态的（硬编码的）。但是如何使用该方法动态地创建它呢？不要在datepicker中填充数组。在datepicker范围之外定义它。