javascript ASP.NET如何为计时器创建日期时间选择器和时间选择器[已关闭]

9gm1akwq  于 2023-01-24  发布在  Java
关注(0)|答案(1)|浏览(110)

已关闭。此问题需要details or clarity。当前不接受答案。
**想要改进此问题?**添加详细信息并通过editing this post阐明问题。

昨天关门了。
Improve this question
我在ASP中创建测验应用程序,我想为测验设置截止日期和时间限制(计时器)。我想创建只显示日、月和年的时间选择器,并将这些项目绑定到模型。其次,我想创建计时器,我们可以选择小时和分钟。我该如何做这些事情?我搜索了这个,但没有人显示如何创建计时器。

j9per5c4

j9per5c41#

您可以参考以下示例在页面上显示DatePicker和TimePicker小部件。

  • 添加所需的css和js引用 *
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet" />
        
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
  • 日期选择器的html代码 *
<div class="container">
   <div class="row">
      <div class='col-sm-6'>
         <div class="form-group">
                <div class='input-group date' id='datepicker'>
               <input type='text' class="form-control" />
               <span class="input-group-addon">
               <span class="glyphicon glyphicon-time"></span>
               </span>
            </div>
         </div>
      </div>
      <div class='col-sm-6'>
         <div class="form-group">
                <div class='input-group date' id='timepicker'>
               <input type='text' class="form-control" />
               <span class="input-group-addon">
               <span class="glyphicon glyphicon-time"></span>
               </span>
            </div>
         </div>
      </div>
   </div>
</div>
  • 用于初始化和配置日期时间选择器的js代码 *
<script>
    $(function(){
        $('#datepicker').datetimepicker({
                format: 'LL'
            });

            $('#timepicker').datetimepicker({
                format: 'LT'
            });
    })
</script>

测试结果

相关问题