从mysql中禁用jquery时间的日期和时间

时间:2015-10-24 00:33:23

标签: php jquery mysql ajax datepicker

更新这是我的问题的完整更新

<!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.

上面是一个页面,您可以在其中查看日历,并禁用某些日期,这些日期是从数据库中提取的。我正在使用this picker

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

  ]
})

在我的databese'ddate'中是varchar,没有主键,没有唯一ID,没有,包含

2015,9,30   
2015,9,31   
2015,10,30  
  1. 没有传递值或者从mysql到javascript或者其他东西,我想我想要多维数组。

  2. 我想要的javascript数组是月-1,因为正如我上面所解释的,在禁用此选项的禁用选项中,您必须输入上个月的数字。如果是第一个月,则意味着12。

  3. 注意我想对timepicker使用相同的内容,但如果我了解日历的问题,我想我可以独立完成

1 个答案:

答案 0 :(得分:1)

我认为你的数据库内容是:

ddate: varchar()

存储在表testdates中的值(作为字符串):

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

选择仍然是原样加上为数组构建创建一个字符串到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();
}

现在使用内部构建脚本部分

// 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
});

注意:我没有对它进行测试,只是从头脑中写下这些线。可能有一些打字错误,但一般应该有效。

更新:

不确定选择器,但也尝试一下,而不是上面的脚本部分

// 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; ?> ]
});