Disable dates and time in a jquery time from mysql

Question

Update This is a complete update to my question

<!doctype html>
<html>

<meta charset="utf-8">

<meta name="author" content="Amsul - http://amsul.ca">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<title>Pickadate.js</title>

<link rel="stylesheet" href="../../lib/themes/default.css">
<link rel="stylesheet" href="../../lib/themes/default.date.css">
<link rel="stylesheet" href="../../lib/themes/default.time.css">

<!--[if lt IE 9]>
    <script>document.createElement('section')</script>
    <style type="text/css">
        .holder {
            position: relative;
            z-index: 10000;
        }
        .datepicker {
            display: block;
        }
    </style>
<![endif]-->


<body>
<?php
require 'connect-db.php';

   try{
    $stmt = $db->query("SELECT ddate FROM testdates");
$result = $stmt->fetchAll(\PDO::FETCH_ASSOC);
}catch(\PDOException $e){
    echo $e->getMessage();
}

$json_array = json_encode($result)

   ?>




    <section class="section">

        <form>
            <fieldset>
                <h3><label for="datepicker_id">Pick a date.</label></h3>

                <input
                    id="datepicker_id"
                    class="datepicker"
                    name="date"
                    type="text"
                    value=""
                    data-value="">

                <br><br><br><br><br>


                <h3><label for="timepicker_id">Pick a time</label></h3>
                <input
                    id="timepicker_id"
                    class="timepicker"
                    value=""
                    type="time"
                    name="time">
                    <!-- valuee="2:30 AM"
                    data-value="0:00" -->

                <!-- <button type="button">Disable all dates</button>
                <input class="button" type="submit" value="open"> -->
            </fieldset>
        </form>


        <div id="container"></div>



    </section>


    <script src="../jquery.1.9.1.js"></script>
    <script src="../../lib/picker.js"></script>
    <script src="../../lib/picker.date.js"></script>
    <script src="../../lib/picker.time.js"></script>
    <script src="../../lib/legacy.js"></script>



    <script type="text/javascript">
    //datepicker
     var disdates = <?php echo $json_array; ?>


        var $input = $( '.datepicker' ).pickadate({
            formatSubmit: 'yyyy/mm/dd',
             min: true,
            container: '#container',
            // editable: true,
            closeOnSelect: true,
            closeOnClear: false,
              disable: [ disdates

  ]

        })





        var picker = $input.pickadate('picker')




        // picker.set('select', '14 October, 2014')
        // picker.open()

        // $('button').on('click', function() {
        //     picker.set('disable', true);
        // });

    </script>



<script type="text/javascript">
//timepicker

        var dtimes = new Date(2015,11,28,5,30);
        var $timeinput = $( '.timepicker' ).pickatime({
            disable: [
    [2,0],
    dtimes


    ]


        })
        var timepicker = $timeinput.pickatime('picker')

    </script>



</body>
</html> // i must thank users in php chatroom for helping me fix the errors.

That above, is a page where you see a calendar, and some dates are disabled, which are fetched from the database. I'm using this picker

  disable: [
    [2015,29,9], // disables today strangely month -1 and only accepts yyy,mm,dd
    [some other array]

  ]
})

In my databese 'ddate' is varchar, no primary key, no unique id, nothing, containing

2015,9,30   
2015,9,31   
2015,10,30

the values aren't being passed or something from mysql to javascript or something, and i guess i want multidimentional array.
what i want the javascript array to have is month -1 because as I explained above, in disable option to disable this day, you have to enter last month number. and if first month, means 12.

Note I want to use the same for timepicker but I guess I could do on my own if I understand the issue with calendar

Answer 1

I assume, that your db content is:

ddate: varchar()

Values stored in table testdates (as strings):

2015-10-29
2015-10-15
2015-10-10

Select is still as is plus create a string for array build to js

try{
  $stmt = $db->query("SELECT ddate FROM testdates");
  $db_ddates = $stmt->fetchAll(\PDO::FETCH_ASSOC);

  $js_ddates = "";
  foreach ($db_ddates as $row => $record) {
    $js_ddates .= '"' . $record['ddate'] . '",';
  }

}
catch(\PDOException $e) {
  echo $e->getMessage();
}

Now use that inside building the script part

// take dates as array of strings from db
var ddates_str_arr = [ <?php echo $js_ddates; ?> ];
// build dates array for picker
var disdates = [];
for (var i = 0; i < ddates_str_arr.length; i++) {
  disdates.push(new Date(ddates_str_arr[i]));
}
// just use it in picker
var $input = $( '.datepicker' ).pickadate({
  formatSubmit: 'yyyy/mm/dd',
  min: true,
  container: '#container',
  // editable: true,
  closeOnSelect: true,
  closeOnClear: false,
  disable: disdates
});

ATTENTION: I have not test it but just write those lines from mind. There may some typing erratas but should work in general.

UPDATE:

Not sure about picker but give this a try too instead of the above script part

// just use it in picker
var $input = $( '.datepicker' ).pickadate({
  formatSubmit: 'yyyy/mm/dd',
  min: true,
  container: '#container',
  // editable: true,
  closeOnSelect: true,
  closeOnClear: false,
  disable: [ <?php echo $js_ddates; ?> ]
});

Disable dates and time in a jquery time from mysql

Question

1 answers

solution1
2 ACCPTED 2015-10-29 19:36:50

Disable dates and time in a jquery time from mysql

Question

1 answers

solution1 2 ACCPTED 2015-10-29 19:36:50

solution1
2 ACCPTED 2015-10-29 19:36:50