blocks|key|261449|text|http://jqueryui.com/demos/datepicker/#event-beforeShowDay|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|261450|将beforeShowDay中的date参数与数组中的日期进行比较，如果匹配，则返回上面链接中定义的数组。|261451|在您从beforeShowDay返回的数组中，第二个元素用于设置将在日期使用的类名，然后您可以使用css来设置该类的样式。|261452|entityMap|0|LINK|mutability|MUTABLE|url^0|0|1L|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@$A|P|B|Q|1|R]]|C|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|4]]]]

<a href="http://jqueryui.com/demos/datepicker/#event-beforeShowDay" rel="nofollow">http://jqueryui.com/demos/datepicker/#event-beforeShowDay</a>

You compare the date parameter in the beforeShowDay with the dates you have got in your array, and if there is a match you return an array as defined in the link above.

In the array you return from beforeShowDay, the second element is used to set the class name which will be used on the date, you can then use css to set styles for that class.

blocks|key|257339|text|请看一下文档。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|257340|257341|+beforeShowDay该函数接受日期作为参数，并且必须返回一个等于true/false的数组，该数组表示该日期是否可选，1等于CSS类名称或'‘表示默认表示，2返回该日期的可选弹出工具提示。在显示它之前，每天都会在datepicker中调用它。|blockquote|offset|length|257342|257343|257344|这意味着您需要创建一个函数，该函数将接受日期并返回一个参数数组，其中值为：|257345|css+|257346|boolean-指示date是否可以是selected|unordered-list-item|257347|
|257348|string+-将应用于date|257349|257350|字符串的类的名称-此date的可选弹出工具提示|257351|257352|下面是一个示例：|257353|var+your_dates+=+[new+Date(2011,+7,+7),new+Date(2011,+7,+8)];+//+just+some+dates.

$('#whatever').datepicker({
+++beforeShowDay:+function(date)+{
++++++//+check+if+date+is+in+your+array+of+dates
++++++if($.inArray(date,+your_dates))+{
+++++++++//+if+it+is+return+the+following.
+++++++++return+[true,+'css-class-to-highlight',+'tooltip+text'];
++++++}+else+{
+++++++++//+default
+++++++++return+[true,+'',+''];
++++++}
+++}
});|code-block|syntax|javascript|257354|现在，您可以添加样式以突出显示日期|257355|<style>
+++.css-class-to-highlight{
+++++++background-color:+#ff0;
+++}
</style>|257356|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jqueryui.com/datepicker/#option-beforeShowDay^0|0|0|1|D|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1J|8|@]|9|@$F|1K|G|1L|1|1M]]|A|$]]|$1|H|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1P|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1R|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1S|8|@]|9|@]|A|$]]|$1|S|3|T|5|P|7|1T|8|@]|9|@]|A|$]]|$1|U|3|R|5|6|7|1U|8|@]|9|@]|A|$]]|$1|V|3|W|5|P|7|1V|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1X|8|@]|9|@]|A|$]]|$1|10|3|11|5|12|7|1Y|8|@]|9|@]|A|$13|14]]|$1|15|3|16|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|17|3|18|5|12|7|20|8|@]|9|@]|A|$13|14]]|$1|19|3|-4|5|6|7|21|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|1G]]]]

Have a look at the documentation. 

<blockquote>
 <a href="http://api.jqueryui.com/datepicker/#option-beforeShowDay">beforeShowDay</a> The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.
</blockquote>

This means that you need to create a function that will take a date and return an array of parameters where values are:

<ol>
<li>boolean - indicates if date can be selected</li>
<li>string - name of the css class that will be aplied to the date</li>
<li>string - an optional popup tooltip for this date</li>
</ol>

here is an example:

<pre><code>var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.

$('#whatever').datepicker({
 beforeShowDay: function(date) {
 // check if date is in your array of dates
 if($.inArray(date, your_dates)) {
 // if it is return the following.
 return [true, 'css-class-to-highlight', 'tooltip text'];
 } else {
 // default
 return [true, '', ''];
 }
 }
});
</code></pre>

and now you can add the style to highlight the date

<pre><code>&lt;style&gt;
 .css-class-to-highlight{
 background-color: #ff0;
 }
&lt;/style&gt;
</code></pre>

blocks|key|261458|text|我用以下方法解决了这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|261459|var+disabledDays+=+["2011-7-21","2011-7-24","2011-7-27","2011-7-28"];
var+date+=+new+Date();
jQuery(document).ready(function()+{+
++++$(+"#dateselector").datepicker({+
++++++++dateFormat:+'yy-mm-dd',
++++++++beforeShowDay:+function(date)+{
++++++++++++var+m+=+date.getMonth(),+d+=+date.getDate(),+y+=+date.getFullYear();
++++++++++++for+(i+=+0;+i+<+disabledDays.length;+i%2B%2B)+{
++++++++++++++++if($.inArray(y+%2B+'-'+%2B+(m%2B1)+%2B+'-'+%2B+d,disabledDays)+!=+-1)+{
++++++++++++++++++++//return+[false];
++++++++++++++++++++return+[true,+'ui-state-active',+''];
++++++++++++++++}
++++++++++++}
++++++++++++return+[true];

++++++++}
++++});
});|code-block|syntax|javascript|261460|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I solved the issue using

<pre><code>var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"];
var date = new Date();
jQuery(document).ready(function() { 
 $( "#dateselector").datepicker({ 
 dateFormat: 'yy-mm-dd',
 beforeShowDay: function(date) {
 var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
 for (i = 0; i &lt; disabledDays.length; i++) {
 if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
 //return [false];
 return [true, 'ui-state-active', ''];
 }
 }
 return [true];

 }
 });
});
</code></pre>

blocks|key|262758|text|发现投票最多的答案不起作用。对代码进行了一些更新，使其正常工作。$.inArray()主要搜索indexOf()。另外，我们不能直接比较两个日期是否相等。参考：Compare+two+dates+with+JavaScript|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|262759|function+inArrayDates(needle,+haystack){
++++var+found+=+0;
++++for+(var+i=0,+len=haystack.length;i<len;i%2B%2B)+{
++++++++if+(haystack[i].getTime()+==+needle.getTime())+return+i;
++++++++++++found%2B%2B;
++++++++}
++++return+-1;
}|code-block|syntax|javascript|262760|并将接受的函数更新为|262761|if(inArrayDates(date,+markDates)+!=+-1)+{
++++++++++++return+[true,+'selected-highlight',+'tooltip+here'];
++++++++++}+else+{
+++++++++++++return+[true,+'',+''];
++++++++++}|262762|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript^0|28|X|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Found the most voted answer not working. Updated the code little bit to make it working. $.inArray() mostly search for indexOf(). Also we can't compare two dates directly for equality. 
Reference : <a href="https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript">Compare two dates with JavaScript</a>

<pre><code>function inArrayDates(needle, haystack){
 var found = 0;
 for (var i=0, len=haystack.length;i&lt;len;i++) {
 if (haystack[i].getTime() == needle.getTime()) return i;
 found++;
 }
 return -1;
}
</code></pre>

And update the accepted function as 

<pre><code>if(inArrayDates(date, markDates) != -1) {
 return [true, 'selected-highlight', 'tooltip here'];
 } else {
 return [true, '', ''];
 }
</code></pre>

blocks|key|2948706|text|JS中的日期是对象Date的实例，因此您无法使用==或===正确检查日期是否相等。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2948707|简单的解决方案：|2948708|var+your_dates+=+[
+++new+Date(2017,+4,+25),
+++new+Date(2017,+4,+23)
];

$(+"#some_selector"+).datepicker({
++++beforeShowDay:+function(date)+{
++++++++are_dates_equal+=+d+=>+d.getTime()+===+date.getTime();
++++++++if(your_dates.some(are_dates_equal))+{
++++++++++++return+[true,+'ui-state-active',+''];
++++++++}
++++++++return+[true,+'',+''];
++++}
})|code-block|syntax|javascript|2948709|entityMap^0|9|4|O|2|R|3|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

Dates in JS are instances of object <code>Date</code>, so you can't check properly if dates are equal using <code>==</code> or <code>===</code>.

Simple solution:

<pre><code>var your_dates = [
 new Date(2017, 4, 25),
 new Date(2017, 4, 23)
];

$( "#some_selector" ).datepicker({
 beforeShowDay: function(date) {
 are_dates_equal = d =&gt; d.getTime() === date.getTime();
 if(your_dates.some(are_dates_equal)) {
 return [true, 'ui-state-active', ''];
 }
 return [true, '', ''];
 }
})
</code></pre>

blocks|key|262778|text|我得到了一个简单的解决方案，其中我们只需给出将被禁用的日期，并显示可用dates.And的颜色它对我有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|262779|+++<style>
++++.availabledate+a+{
+++++++++background-color:+#07ea69+!important;
+++++++++background-image+:none+!important;
+++++++++color:+#ffffff+!important;
+++++}
+++++</style>|code-block|syntax|javascript|262780|对于脚本，请使用以下内容：|262781|<script>

++++$(function()+{
++++++++//This+array+containes+all+the+disabled+array
++++++++++datesToBeDisabled+=+["2019-03-25",+"2019-03-28"];

++++++++++++$("#datepicker").datepicker({
++++++++++++++changeMonth:+true,
++++++++++++++changeYear:+true,
++++++++++++++minDate+:+0,
++++++++++++++todayHighlight:+1,
++++++++++++++beforeShowDay:+function+(date)+{
++++++++++++++++var+dateStr+=+jQuery.datepicker.formatDate('yy-mm-dd',+date);
++++++++++++++++if(dateStr){
++++++++++++++++++return+[datesToBeDisabled.indexOf(dateStr)+==+-1,"availabledate"];
++++++++++++++++}else{
++++++++++++++++++return+[datesToBeDisabled.indexOf(dateStr)+==+-1,""];
++++++++++++++++}

++++++++++++++},

++++++++++++});


++++});

++</script>|262782|希望这能帮助到一些人。|262783|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I got a simple solution where only we have to give the dates which will be disabled and to show color for available dates.And it worked for me

<pre><code> &lt;style&gt;
 .availabledate a {
 background-color: #07ea69 !important;
 background-image :none !important;
 color: #ffffff !important;
 }
 &lt;/style&gt;
</code></pre>

And for script use this:

<pre><code>&lt;script&gt;

 $(function() {
 //This array containes all the disabled array
 datesToBeDisabled = ["2019-03-25", "2019-03-28"];

 $("#datepicker").datepicker({
 changeMonth: true,
 changeYear: true,
 minDate : 0,
 todayHighlight: 1,
 beforeShowDay: function (date) {
 var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
 if(dateStr){
 return [datesToBeDisabled.indexOf(dateStr) == -1,"availabledate"];
 }else{
 return [datesToBeDisabled.indexOf(dateStr) == -1,""];
 }

 },

 });


 });

 &lt;/script&gt;
</code></pre>

Hope it may help someone.

blocks|key|261481|text|对我来说起作用的是使用内置的jqueryui函数formatDate();，当涉及到css时，我不得不对它进行一些调整，并添加额外的类来突出显示日期。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|261482|style.css|BOLD|261483|#datepicker+.event-highlight+.ui-state-highlight,+
.ui-widget-content+.ui-state-highlight,+
.ui-widget-header+.ui-state-highlight+
{
++++background-color:+darkgreen+!important;
++++color+:+white+!important;
++++border:+1px+solid+darkgreen+!important;
++++border-color:+darkgreen+!important;

}|code-block|syntax|javascript|261484|jquery+formatDate()|261485|//different+date+formats+accepted
"mm/dd/yy"
"yy-mm-dd"
"d+M,+y"
"d+MM,+y"
"DD,+d+MM,+yy"
"'day'+d+'of'+MM+'in+the+year'+yy"

//return+today's+date
$.datepicker.formatDate("yy-mm-dd",+$('#datepicker').datepicker("getDate"));
++++
//alternatively+you+can+use+this+syntax
jQuery.datepicker.formatDate('yy-mm-dd',+'getDate');|261486|日期选择器中的突出显示日期|261487|$('#datepicker').datepicker({
dateFormat:+'yy-mm-dd',
changeMonth:+true,
changeYear:+true,
beforeShowDay+:+function+(date){
json.events.forEach(function+(jsondate,counter)+{

//get+jquery+date
var+jquerydate+=+$.datepicker.formatDate("yy-mm-dd",+date);

//OR+alternative+syntax
var+jquerydate+=+jQuery.datepicker.formatDate('yy-mm-dd',+date);

//get+date+busy+with+events
var+busyday+=+jsondate.date;

if+(jquerydate+===+busyday)+{
return+[true,+'.event-highlight',+'tooltip+text'];
+++++++++++
}else{
return+[true,+'',+''];
}

});
return+[true];
},|261488|entityMap^0|O|D|0|0|9|0|0|0|J|0|0|7|6|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|13|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|14|8|@$9|15|A|16|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|17|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|18|8|@$9|19|A|1A|B|H]]|D|@]|E|$]]|$1|T|3|U|5|K|7|1B|8|@]|D|@]|E|$L|M]]|$1|V|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|W|$]]

What worked for me was to use the builtin jqueryui function <code>formatDate();</code> When it comes to the css I had to tweak it a little and add extra classes to be able to highlight dates.
style.css
<pre><code>#datepicker .event-highlight .ui-state-highlight, 
.ui-widget-content .ui-state-highlight, 
.ui-widget-header .ui-state-highlight 
{
 background-color: darkgreen !important;
 color : white !important;
 border: 1px solid darkgreen !important;
 border-color: darkgreen !important;

}
</code></pre>
jquery formatDate()
<pre><code>//different date formats accepted
&quot;mm/dd/yy&quot;
&quot;yy-mm-dd&quot;
&quot;d M, y&quot;
&quot;d MM, y&quot;
&quot;DD, d MM, yy&quot;
&quot;'day' d 'of' MM 'in the year' yy&quot;

//return today's date
$.datepicker.formatDate(&quot;yy-mm-dd&quot;, $('#datepicker').datepicker(&quot;getDate&quot;));
 
//alternatively you can use this syntax
jQuery.datepicker.formatDate('yy-mm-dd', 'getDate');
</code></pre>
highlight dates in datepicker
<pre><code>$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
beforeShowDay : function (date){
json.events.forEach(function (jsondate,counter) {

//get jquery date
var jquerydate = $.datepicker.formatDate(&quot;yy-mm-dd&quot;, date);

//OR alternative syntax
var jquerydate = jQuery.datepicker.formatDate('yy-mm-dd', date);

//get date busy with events
var busyday = jsondate.date;

if (jquerydate === busyday) {
return [true, '.event-highlight', 'tooltip text'];
 
}else{
return [true, '', ''];
}

});
return [true];
},
</code></pre>

How i can use beforeShowDay for highlighting days in jQuery UI datepicker. I have the following date array

<pre><code>Array
(
 [0] =&gt; 2011-07-07
 [1] =&gt; 2011-07-08
 [2] =&gt; 2011-07-09
 [3] =&gt; 2011-07-10
 [4] =&gt; 2011-07-11
 [5] =&gt; 2011-07-12
 [6] =&gt; 2011-07-13
)
</code></pre>

Highlight dates in jquery UI datepicker

jQuery

如何使用beforeShowDay在jQuery UI日期选择器中突出显示日期。我有以下日期数组Array(    [0] => 2011-07-07    [1] => 2011-07-08    [2] => 2011-07-09    [3] => 2011-07-10    [4] => 2011-07-11 ...

问在jquery UI日期选择器中突出显示日期
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jquery UI日期选择器中突出显示日期EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jquery UI日期选择器中突出显示日期
EN