如何从jquery日历打印日期?

时间:2013-10-16 06:21:24

标签: php html jquery-ui-datepicker

我创建了一个jquery日历,如下所示

<div id="calendar"> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery-ui-datepicker.min.js"></script>
<script>
    $('#calendar').datepicker({
         inline: true,
         firstDay: 1,
         showOtherMonths: true,
         dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
    });
</script>

用户可以从此日历中选择日期。现在如何使用echo或其他方式在php页面中打印此日期?我想将用户选择的日期存储在数据库中。这该怎么做? jquery-ui-datepicker.min.js的链接如下:http://www.anmaveer.in/honda/js/jquery-ui-datepicker.min.js

4 个答案:

答案 0 :(得分:1)

创建一个文本框并将其ID设置为“calendar”

<input type="text" name="calender_text" id="calendar">

在表格中填写此文本框,在提交此表单时,请求此提交

$_REQUEST['calender_text'];

现在您可以在数据库中插入此值

答案 1 :(得分:1)

第一个日历永远不会显示这样。其次,如果您需要获取价值,请使用ID为calendar的文本字段,然后使用您的代码:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="js/jquery-ui-datepicker.min.js"></script>
  <script>
$('#calendar').datepicker({
     inline: true,
     firstDay: 1,
     showOtherMonths: true,
     dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
});
 </script>

使用jQuery("#calendar").val();

获取日期选择器更改事件中选择的日期值

答案 2 :(得分:0)

您可以在JavaScript中获取日期的值,如下所示:

HTML:

<input type="text" id="calendar">

JS:

$('#calendar').datepicker({
    inline: true,
    firstDay: 1,
    showOtherMonths: true,
    dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
});

$('#calendar').on('change', function () {
    console.log($(this).val());
})

每次选择新日期时,都会将其记录到控制台。您可以轻松地将console.log()更改为您的自定义逻辑。

小提琴:http://jsfiddle.net/KyleMuir/6fJ9u/

希望这有帮助

答案 3 :(得分:0)

你可以使用datepicker作为任何使用此代码的输入的类:

<input id="txt" class="datepicker" type="text" name="txt"></input>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery-ui-datepicker.min.js"></script>
<script>
    $('.datepicker').datepicker({
         inline: true,
         firstDay: 1,
         showOtherMonths: true,
         dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
    });
</script>

修改

demo_update

<div id="datepicker"></div>

$("#datepicker").datepicker({
         inline: true,
         firstDay: 1,
         showOtherMonths: true,
         dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
    });