DatePicker中的特定日期
[英]specific dates in DatePicker
问题描述
I am using a datepicker in a MVC4 application. 
我在MVC4应用程序中使用了一个datepicker。
But I want to select just a specific range in the DatePicker. 但我想在DatePicker中只选择一个特定的范围。 Because now there is a dropdownlist where the user can select a date. 因为现在有一个下拉列表，用户可以在其中选择日期。 But the dropdownlist has to be replaced by a datepicker. 但是下拉列表必须由日期选择器替换。
I have a method for the AvailableDates, like this: 我有一个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);
}
And this is the JQuery from the DatePicker: 这是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);
But how to use that method in the DatePicker? 但是如何在DatePicker中使用该方法？
Thank you 谢谢
But how to use this piece: 但是如何使用这件作品：
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 the DatePicker plugin? 在DatePicker插件中？
Thank you 谢谢
I try it 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 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);
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);
The dates that are in the array are also selectable 数组中的日期也是可选的
Thank you 谢谢
I try to call the method with a ajax call, like this: 我尝试使用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"
})
But $.ajax is not recognisable. 但$ .ajax无法识别。
Thank you 谢谢
I also tried like this, to call the method. 我也尝试过这样，调用方法。 the class name of the method is: QMatic: 方法的类名是：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"
})
I am also using xforms, like this: 我也在使用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>
so here are the available dates in a dropdownlist: 以下是下拉列表中的可用日期：
<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>
and this is the datepicker: 这是datepicker：
<xf:input ref="dateInputQmatic" incremental="true" class="qmatic-dateslot">
<xf:label>Selecteer datum</xf:label>
</xf:input>
what also has to return the only availbe dates from the method: 什么还必须从该方法返回唯一的availbe日期：
GetAvailableDates
1 个解决方案
解决方案1
1 已采纳 2015-07-22 08:46:11
You can look into the beforeshowday event in datepicker. 您可以在datepicker中查看beforeshowday事件。 Look at the following link for an example - 请查看以下链接以获取示例 -
Jquery UI datepicker. Jquery UI datepicker。 Disable array of Dates 禁用日期数组
Updated code 更新的代码
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"
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
用特定日期填充jQuery Datepicker - Populating jQuery Datepicker with specific dates
将DatePicker绑定到日期列表 - Bind DatePicker to List of Dates
C＃/ WPF - 如何仅在DatePicker对象中启用特定的日期集（不是范围） - C#/WPF - How to enable only a specific set of dates(not a range) in a DatePicker object
如何从两个 Datepicker 中选择的两个日期之间的特定持续时间中排除停电日？ - How to exclude blackout days from a specific duration between two dates chosen from a two Datepicker?
禁用日期选择器中下拉列表中的日期 - Disable dates from dropdownlist in datepicker
仅显示日期选择器中的选定日期 - Display only chosen dates in datepicker
C＃比较日期和转换后的DatePicker - C# Comparing dates with converted DatePicker
Telerik MVC DatePicker - 禁用所有未来日期 - Telerik MVC DatePicker - Disable all future dates
WPF DatePicker仅显示可用日期 - WPF DatePicker to Display only available Dates
如何禁用日期选择器对话框片段上的最小日期 - how to disable minimum dates on datepicker dialouge fragment
相关标签