001.<html>
002. <head>
008. <style type="text/css">
009.#print-array {
010. position: fixed;
011. top: 0;
012. right: 0;
013. padding: 20px;
014. color: red;
015.}
016..ui-datepicker .ui-datepicker-calendar .ui-state-highlight-tt a{
017. background: green !important;
018.}
019.
020.</style>
021. </head>
022. <body>
023. <div class="container">
024. <div id="datepicker"></div>
025. <div id="print-array"></div>
026. <button id="red">แดง</button>
027.
028.
029. </div>
030.
031. <script type="text/javascript">
032.
033. $(document).ready(function() {
034.
035.
036. var dates = new Array();
037. function addDate(date) {
038. if (jQuery.inArray(date, dates) < 0) dates.push(date);
039. }
040.
041. function removeDate(index) {
042. dates.splice(index, 1);
043. }
044.
045. function printArray() {
046. var printArr = new String;
047. dates.forEach(function(val) {
048. printArr += '<h4>' + val + '</h4>';
049. });
050. $('#print-array').html(printArr);
051. }
052.
053. function addOrRemoveDate(date) {
054. var index = jQuery.inArray(date, dates);
055. if (index >= 0)
056. removeDate(index);
057. else
058. addDate(date);
059. printArray();
060. }
061.
062.
063. function padNumber(number) {
064. var ret = new String(number);
065. if (ret.length == 1) ret = "0" + ret;
066. return ret;
067. }
068.
069. $("#datepicker").datepicker({
070. onSelect: function(dateText, inst) {
071. addOrRemoveDate(dateText);
072. },
073. beforeShowDay: function(date) {
074. var year = date.getFullYear();
075.
076. var month = padNumber(date.getMonth() + 1);
077. var day = padNumber(date.getDate());
078.
079. var dateString = month + "/" + day + "/" + year;
080.
081.
082. var gotDate = jQuery.inArray(dateString, dates);
083. if (gotDate >= 0) {
084.
085. return [true, "ui-state-highlight-tt"];
086. }
087.
088. return [true, ""];
089.
090.
091. }
092. });
093.
094.});
095.
096. </script>
097.
098.
099.
100.
101. </body>
102.
103.</html>
