Jquery日期选择器，每天定制价值

Question

我尝试使用jquery日期选择器每天显示一些值。我能够为每天添加值，但问题是当我点击当天，输入框显示Nan，未定义等。我尝试了各种组合，但我无法解决它。我想得到一个解决方案。

＆＃13;

＆＃13;

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
  
  
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    background:0 !important;
   border: 0 !important;
    color: #9c9c9c !important;
    font-weight: normal;
	text-align: center !important;
}
table {
    border-collapse: collapse !important;
	margin:0;
}
.ui-datepicker-multi .ui-datepicker-group table{
width:100% !important;
}

<!-- .ui-datepicker-unselectable.ui-state-disabled{
    border: 0  !important;	
} -->
.ui-datepicker-unselectable.ui-state-default{
display:none;
}
.ui-state-default.ui-state-hover,.ui-state-default,.ui-state-highlight,.ui-state-active{
background-color:#F4777C !important;
color:#fff !important;
}
tbody:before {   
     /* This doesn't work because of border-collapse */
    line-height:1.5em;
    content:"-";
    color: white;
    display:block;	
}
tbody{
margin-left:10px !important;
margin-right:10px !important;
}
td{
 border:1px solid #F6F6F6 !important;
}

 #ui-datepicker-div{
  display: none;
    left: 8px;
    position: absolute;
    top: 31px;
    width: 50% !important;
    z-index: 1;
 
 }
 .ui-datepicker-header.ui-widget-header{
 background-color:#F6F6F6 !important;
 border:0 !important;
 font-weight: bold;
 color:#9c9c9c !important;
 }
 .ui-datepicker th{
 background-color:#F6F6F6 !important;
 border:0 !important;
 font-weight: normal;
 }
  </style>
<input type="text" id="datepicker" />
<input type="text" id="datepicker1" />
<script>
  $( function() {
$('#datepicker').datepicker({
		changeMonth: false,
		numberOfMonths: 2,
		dateFormat: 'D, d MM' ,
		dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
		beforeShow: function(input, inst) {
		insertMessage();
    }
});

$('#datepicker1').datepicker({
		changeMonth: false,
		numberOfMonths: 2,
		dateFormat:'D, d MM' ,
		dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
		beforeShow: function(input, inst) {
		insertMessage();
    }
});

function insertMessage(message) {
    clearTimeout(insertMessage.timer);
    
    if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')){
	    var ticketValue = 1;		
		
        $('.ui-state-default').append('<div>'+ticketValue+'</div>');
		}
    else
        insertMessage.timer = setTimeout(insertMessage, 10);
}
});
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您使用<td>代替<a>

将新元素放在before()但不在append()内。

＆＃13;

＆＃13;

$(function() {
  $('#datepicker').datepicker({
    changeMonth: false,
    numberOfMonths: 2,
    dateFormat: 'D, d MM',
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    beforeShow: function(input, inst) {
      insertMessage();
    }
  });



  function insertMessage(message) {
    clearTimeout(insertMessage.timer);

    if ($('#ui-datepicker-div .ui-datepicker-calendar .ui-state-default').is(':visible')) {
      var ticketValue = 1;

      $('.ui-state-default').before('<span class="test">' + ticketValue + '</span>');
    } else
      insertMessage.timer = setTimeout(insertMessage, 10);
  }
});

＆＃13;

td {
  position: relative
}

td .test {
  position: absolute;
  top: 0;
  left: 0;
  background: green;
  font-size: 8px;
  color:white
}

＆＃13;

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<input type="text" id="datepicker" />

＆＃13;

＆＃13;

＆＃13;