我在MVC4应用程序中使用了一个datepicker.
但我想在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-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);
数组中的日期也是可选的
谢谢
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无法识别.
谢谢
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"
})
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
