【问题标题】:How to print date from jquery calender?如何从jquery日历打印日期?
【发布时间】:2013-10-16 06:21:24
【问题描述】:

我已经创建了一个如下的 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

【问题讨论】:

  • 我无法访问您链接中提供的网站 (anmaveer.in)
  • 我也无法访问网站

标签: php html jquery-ui-datepicker


【解决方案1】:

创建一个文本框并将其设置为“日历”

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

将此文本框放入表单中,并在提交此表单时请求此文件

$_REQUEST['calender_text'];

现在你可以在你的数据库中插入这个值

【讨论】:

  • 我试过了,这是可行的,但问题是压光机显示不稳定。它仅在单击文本框并选择日历消失的日期后显示,我希望此日历每次都显示。如何做到这一点?
【解决方案2】:

第一个日历永远不会这样显示。其次,如果您需要获取价值,请使用 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();获取日期选择器更改事件中选择的日期值

【讨论】:

    【解决方案3】:

    你可以使用 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']
        });
    

    【讨论】:

    • 我试过了,这是可行的,但问题是压光机显示不稳定。它仅在单击文本框并选择日历消失的日期后显示,我希望此日历每次都显示。如何做到这一点?
    【解决方案4】:

    您可以像这样在 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/

    希望对你有帮助

    【讨论】:

    • 你从不使用或不需要使用&lt;/input&gt;
    • 我试过了,这是可行的,但问题是压光机显示不稳定。它仅在单击文本框并选择日历消失的日期后显示,我希望此日历每次都显示。如何做到这一点?
    • @Vallentin 你是对的。当我这样做并复制/粘贴他的div 并重命名为输入时很累,因此出现了错误。编辑修复。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-13
    • 2023-02-23
    • 1970-01-01
    • 1970-01-01
    • 2013-03-30
    • 1970-01-01
    相关资源
    最近更新 更多