无法更改日期选择器中的日期格式

Question

I have a datepicker where it disables all the dates that is stored within the database, and it works just fine. Although i have a problem, the input format that is currently on is mm-dd-yy and my date format in my database is yy-mm-dd which causes problem from my insertion. I tried adding dateFormat: yy-mm-dd and it does not work, i tried placing it outside and inside the function and all it does is making my datepicker not functional. I really need some assistance, thank you! I'm sorry if its a silly question but I'm still new to the jquery stuff. I tried searching everywhere but since i have a beforeShowDay:function(date) function, i cant seem to fix my problem...

Yes i could just change the format of my date column in my database but i have my other guys working on an admin panel application for the website we're connected to one database, but i can't contact them right now. Thank you!

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

I assume you are using the jQueryUI datepicker .

Now if you would check their API list, you will see how can you format your date.

Let us know if you have any further problems.

Answer 2

Shouldn't you define the format like this?

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

If this is what you've tried already what do you mean with "datepicker not functional", do you get any errors?

Answer 3

A number of things to help with here:

---

Converting your PHP array to JSON

When you get your JSON encoded 'string' from PHP you then need to parse it as a JSON object using JSON.parse(*yourJSONString*);

---

Date formatting issue

Date format without the leading '20' for year requires you to use only one y in your format string.

dateFormat: 'y-mm-dd'

---

Adding the red X's style over disabled dates

The red X's over disabled dates also requires a bit of 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;
}

---

Optional extra JQuery UI plugin

You can even use the tooltip plugin to make selectable dates more obvious

---

Example

 $( 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>