标签: eonasdan-datetimepicker

我正在使用 eonasdandatetimepicker和 bootstrap 3。我有一datetimepicker组作为日历，另一组作为时间。我希望能够让它们并排在同一条线上。但是如果不破坏datetimepicker. 这是我的代码：

<form role="form">
    <div class="form-group">

        <div class="form-group">
            <label for="class">Class:</label> <select multiple
                class="form-control" size="2">
                <option value="1">Class 1</option>
                <option value="2">Class 2</option>
            </select>
        </div>

        <div class="form-group">

        </div>

        <div class="form-group">
            <!-- Date Picker -->                
            <div class="input-group date" id="startDate">
                <input type='text' class="form-control" /> <span
                    class="input-group-addon"><span
                    class="glyphicon glyphicon-calendar"></span> </span>
            </div>
        </div>
        <div class="form-group">
            <!-- Time Picker -->
            <div class="input-group date" id="startTime">
                <input type='text' class="form-control" /> <span
                    class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </span>
            </div>

        </div>


        <button type="submit" class="btn btn-default">Submit</button> …

当用户多次单击视图标题时，预期行为是：天 -> 月 -> 年 -> 几十年。我需要禁用几十年视图（附有屏幕截图）。这样做用户无法进一步进入“年”视图模式。

我正在使用Bootstrap datetimepicker https://eonasdan.github.io/bootstrap-datetimepicker/

正如文档中提到的,我成功地使用下面的代码更改了向上和向下箭头.

$('#datetimepicker7').datetimepicker({
    sideBySide: true,
    icons: {
        up: "fa fa-chevron-circle-up",
        down: "fa fa-chevron-circle-down",
    }
});

我可以知道如何更改日历的左右图标吗？为了便于理解,我在下图中突出显示了要更改的图标.

任何帮助将受到高度赞赏.

如果我使用它，更改功能只会在打开时触发一次。选择不同的日期将不再触发更改功能。表单中有 2 个日期时间选择器。第一个是设置日期，第二个必须自动填充与第一个相同的日期和时间减去 3 小时。

$("#ed").on("dp.change", function (e) {
    var d = new Date(e.date);
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var year = d.getFullYear();
    var hour = d.getHours() - 3;
    var min = d.getMinutes();
    var setter = day + '-' + month + '-' + year + ' ' + hour + ':' + min;
    $('#re').data("DateTimePicker").defaultDate(setter);
});

我目前正在使用Bootstrap 3.1.1,Eonasdan日期时间选择器v4.7.14和jquery验证插件v1.14.0开发MVC Asp.Net 4.6 WebApp .

我在验证日期方面遇到了一些问题.

• 我的模型看起来像这样:

  public class PersonModel{
      ...
  
      [Required]
      [Display(Name = "Date of Birth")]
      public DateTime? DateOfBirth { get; set; }
  
      ...        
  }
  

  Run Code Online (Sandbox Code Playgroud)

• 我的观点看起来像这样:

  <div class="form-group">
      @Html.LabelFor(x => x.DateOfBirth):
      <span class="text-danger"><b>*</b></span>
      <div class="input-group datepicker">
          <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
          </span>
          @Html.TextBoxFor(x => x.DateOfBirth, new {@class = "form-control", @data_date_format = "DD/MM/YYYY", @placeholder = "DD/MM/YYYY"})
      </div>
      @Html.ValidationMessageFor(x => x.DateOfBirth, "", new { @class = "text-danger" })
  </div>
  

  Run Code Online (Sandbox Code Playgroud)

• 初始化日期时间选择器的关联Js代码:

  (function () {
      // …

  Run Code Online (Sandbox Code Playgroud)

我正在使用Bootstrap datatimepicker（https://eonasdan.github.io/bootstrap-datetimepicker/）。很棒，但是它不会显示或让用户选择秒。

$(document).ready(function () {
    $('#datetimepicker1').datetimepicker({defaultDate: new Date()});
});


<div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

那么，如何选择秒呢？以及如何使秒数以格式显示？目前是05/18/2017 1:26 PM，我要05/18/2017 1:26:40 PM

在开发指南中，有一个fillSeconds()功能，但是我不确定如何在此处应用。

我正在使用 Eonasdan 日期时间选择器。在格式化日期时，它包含 PM 和 AM，所以我喜欢将它用于我的日期，以便轻松识别时间。但是，当我通过 Javascript 创建一些条件来计算两个给定时间的总秒数（包含 AM 和 PM 文本）时，它会发出警报Nan。获取给出的 AM 和 PM 文本的总秒数的最佳解决方案是什么？

代码如下：

<script type="text/javascript">
    var datetime_in= '06/30/2017 7:56 AM';
    var datetime_out= '06/30/2017 5:16 PM';

    var totalseconds= datetime_in - datetime_out;
    alert(totalseconds);
</script>

我必须为几种不同形式的输入字段设置日期选择器。过去我使用过 jQuery 日期选择器，但在这个项目中我使用 Bootstrap 3，所以还有另一种方法可用。这是我到目前为止的例子：

$(document).ready(function() {
  $('.datepick').datetimepicker();
});

<!---*** Start: JQuery 3.3.1 version. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<script language="javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">

<div class="form-group required">
  <div class="input-group">
    <input type="text" class="form-control datepick" name="frmSaveOffice_startdt" id="frmSaveOffice_startdt" required>
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

您可以看到上面的代码片段有效，但我想修改的内容很少。首先我希望输入字段为readonly. 用户应该能够单击日历图标，然后选择date only。我不需要日期旁边的时间。单击该图标将阻止用户输入他们想要的内容。我想知道是否有办法通过 …

如何仅在日期选择时自动关闭日期时间选择器。我正在使用 dp.change 事件，但即使在更改时间时它也会关闭 datetimepicker。

$('.datetimepicker').each(function () {
    $(this).on('dp.change', function (ev) {

       $(this).data('DateTimePicker').hide();

    });
});

timePicker 的 className 是什么？如果我得到这个类并告诉 datetimepicker 如果 className 等于 timepicker 的 className 不要关闭怎么办？

datetimepicker 的最新版本是什么？

1 是这个：http : //eonasdan.github.io/bootstrap-datetimepicker/

第二个是带有 autoClose 属性的。

http://www.malot.fr/bootstrap-datetimepicker/

谢谢。

我的日期时间选择器适用于第一次单击，但如果我再次在输入字段中单击，它会显示带有日期字段的选择器。我怎样才能做到这一点？任何帮助将不胜感激。

这是第一次点击时的图像（预期行为）

这是第二次点击的图像（预期行为与第一次相似）

我的代码在下面

HTML

<div class='input-group' id='dpRM'>
    <input type='text' class="form-control form-control-1 form-input input-sm fromq" placeholder="Enter Month and year" />
    <span class="input-group-addon">
        <span class="fa fa-calendar"></span>
    </span>
</div>

Javascript

<script type="text/javascript">
    $(function() {
        $('#dpRM').datetimepicker({
            format: "MMMM YYYY",
            viewMode: "years",
            //minViewMode: 0,
            toolbarPlacement: "top",
            allowInputToggle: true,
            icons: {
                time: 'fa fa-time',
                date: 'fa fa-calendar',
                up: 'fa fa-chevron-up',
                down: 'fa fa-chevron-down',
                previous: 'fa fa-chevron-left',
                next: 'fa fa-chevron-right',
                today: 'fa fa-screenshot',
                clear: 'fa fa-trash',
                close: 'fa fa-remove'
            }
        });
    });
</script>

提前致谢