Question

我有一个日期选择器，它会禁用存储在数据库中的所有日期，并且它可以正常工作。虽然我遇到了问题，但当前输入的格式是mm-dd-yy，而我数据库中的日期格式是yy-mm-dd，这会导致插入问题。我尝试添加dateFormat：yy-mm-dd并且它不起作用，我尝试将它放在函数外部和内部，它所做的只是让我的日期选择器不起作用。我真的需要一些帮助，谢谢！我很抱歉，如果这是一个愚蠢的问题，但我仍然是jquery的新手。我尝试到处搜索，但由于我有一个beforeShowDay：function（date）函数，我似乎无法解决我的问题......

是的我可以在我的数据库中更改我的日期列的格式，但我让其他人在我们连接到一个数据库的网站的管理面板应用程序上工作，但我现在无法联系他们。谢谢！

PHP

<?php  
$query = " SELECT  * FROM event_table ";
$result = mysqli_query($conn,$query);
$sentToList = array();
while($row = mysqli_fetch_assoc($result)) { 

  $sentToList[] = $row['event_date'];

   }
$json = json_encode($sentToList);

?>

SCRIPT

<script >

    var dateToday = new Date(); 
    $(function() {

    var array = <?php print_r($json) ?>

    $('#mydate').datepicker({

        beforeShowDay: function(date){


            var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
            return [ array.indexOf(string) == -1 ]

        }

    });
});
</script>

Answer 1

我假设您使用的是jQueryUI datepicker。

现在，如果你要查看他们的API列表，你会看到你如何格式化你的约会。

如果您有任何其他问题，请告诉我们。

Answer 2

你不能定义这样的格式吗？

$('#mydate').datepicker({ dateFormat: 'yy-mm-dd' });

如果您已经尝试过，那么你的意思是什么＆＃34; datepicker不起作用＆＃34;，你有任何错误吗？

Answer 3

这里有很多可以帮助的事情：

将PHP数组转换为JSON

当您从PHP获取JSON编码'string'时，您需要使用JSON.parse(*yourJSONString*);

将其解析为JSON对象

日期格式问题

'20'没有前导year的日期格式要求您在格式字符串中仅使用一个y。

dateFormat: 'y-mm-dd'

在禁用日期添加红色X的样式

红色X超过禁用日期也需要一些CSS。

.ui-datepicker-calendar>tbody>tr>td.ui-datepicker-unselectable>span.ui-state-default:before{
  bottom: 0;
  content: "X";
  height: 4px;
  left: 7px;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 4px;
  color: #FF0000;
}

可选的额外JQuery UI插件

您甚至可以使用tooltip插件使可选日期更加明显

实施例

$( function() 
{
  //build up your array
  //this is a mock of var arrayFromPHP = <?php echo json_encode($json); ?>;
  var phpArrayString = '["17-09-30","17-09-29", "17-09-28", "17-09-15", "17-09-09"]';
  
  //parse your json here
  var array = JSON.parse(phpArrayString);

  //include dateFormat AND beforeShowDay options
  $( "#mydate" ).datepicker({ 
      dateFormat: 'y-mm-dd',
      beforeShowDay: function(date)
      {
        var string = jQuery.datepicker.formatDate('y-mm-dd', date);
        
        //You can even use tooltips to make dates you can select more obvious
        return [ array.indexOf(string) == -1, 'highlight', 'You may select this date' ];
      }
  });
  
    //Optionally - call the tooltip plugin on dates that can be selected
  $('#mydate .highlight a').tooltip();
});

/*
  Add this to your stylesheet to include the red X's
*/
.ui-datepicker-calendar>tbody>tr>td.ui-datepicker-unselectable>span.ui-state-default:before{
  bottom: 0;
  content: "X";
  height: 4px;
  left: 7px;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 4px;
  color: #FF0000;
}

/*
  Simple utility classes for example styling
*/
.bordered{
  border: 1px solid black;
}

.padded{
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<div class="bordered">
  <div class="padded">
    <label for="mydate"> Date </label>
    <br />
    <input type="text" id="mydate" size="30" >
  </div>
</div>

无法更改datepicker

3 个答案:

将PHP数组转换为JSON

日期格式问题

在禁用日期添加红色X的样式

可选的额外JQuery UI插件

实施例