DatePicker 中的特定日期
Posted
技术标签:
【中文标题】DatePicker 中的特定日期【英文标题】：specific dates in DatePicker 【发布时间】：2015-10-12 00:39:51 【问题描述】：我在 MVC4 应用程序中使用日期选择器。
但我只想选择 DatePicker 中的特定范围。因为现在有一个下拉列表，用户可以在其中选择日期。但是下拉列表必须由日期选择器替换。
我有一个可用日期的方法，如下所示：
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>
这是日期选择器：
<xf:input ref="dateInputQmatic" incremental="true" class="qmatic-dateslot">
<xf:label>Selecteer datum</xf:label>
</xf:input>
还必须从方法中返回唯一可用的日期：
GetAvailableDates
【问题讨论】：
【参考方案1】：您可以在 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"
)
【讨论】：
嗨 Akhil，但是如何在 Jquery 插件中使用它？我编辑我的帖子。谢谢 您需要添加“beforeShowDay”以及其他属性。 谢谢。我更新了帖子 好的，效果很好。但是现在如何使用该方法。因为现在它是静态的（硬编码）。但是怎么用方法动态的呢？ 不要在 datepicker 中填充你的数组。在日期选择器范围之外定义它。以上是关于DatePicker 中的特定日期的主要内容，如果未能解决你的问题，请参考以下文章
在jQuery UI datepicker上禁用一周中的特定日期[重复]
React & Ant-Design 应用 —— DatePicker 日期选择框 及 特定日期禁用 Moment.JS
React & Ant-Design 应用 —— DatePicker 日期选择框 及 特定日期禁用 Moment.JS