从输入值设置 jQuery 日期范围选择器的日期答案

【问题标题】：Set dates for jQuery Date Range Picker from input values从输入值设置 jQuery 日期范围选择器的日期
【发布时间】：2015-04-09 21:38:17
【问题描述】：

https://github.com/longbill/jquery-date-range-picker

我的一切工作都很好，但我似乎无法让选择器使用我在 .有两个输入，开始日期和结束日期。我有一个 value="" 两个日期，这应该是 datepicker 的默认日期。然后用户可以更改这些日期。

我尝试了一些不同的想法，但我无法获取任何东西来获取输入的 value 属性。任何见解将不胜感激。

这是我的代码：

<div class="datepicker-to-from">
    <input type="date" id="startTimestamp" class="date-picker" value="11/18/2012 05:45 AM">

    <input type="date" id="endTimestamp" class="date-picker" value="04/09/2014 5:00 PM">
</div>

$('.datepicker-to-from').dateRangePicker({
    format: 'MM/DD/YYYY HH:mm A',
    showShortcuts: false,
    time: {
        enabled: true
    },  
    getValue: function(){
        $('#startTimestamp').val() + ' to ' + $('#endTimestamp').val();
    },
    setValue: function(){
        $('#startTimestamp').val();
        $('#endTimestamp').val();
    },
    startDate: $('#startTimestamp').val()
});

2015 年 4 月 10 日更新： 在 andybeli 和 The F 的帮助下，我解决了这个问题。对于遇到类似情况的人来说，最终的 JS 代码看起来像这样。

$('.datepicker-to-from').dateRangePicker({
    format: 'MM/DD/YYYY HH:mm A',
    showShortcuts: false,
    time: {
        enabled: true
    },  
    setValue: function(s,s1,s2){
        $('#startTimestamp').val(s1);
        $('#endTimestamp').val(s2);
    },
}); 

var startDate = $('#startTimestamp').val();
var endDate = $('#endTimestamp').val();

$('.datepicker-to-from').data('dateRangePicker').setDateRange(startDate,endDate);

【问题讨论】：

[link]rawgit.com/longbill/jquery-date-range-picker/master/index.html[/… 表示如果您不提供任何设置，您将获得默认值。只要做演示，你就可以看到默认值配置。
您可以在 dateRangePicker 初始化时强制/设置日期范围：$(dom).data('dateRangePicker') .setDateRange('2013-11-20','2013-11-25');
user3460763 - 感谢您的回复。我确实尝试过。我清除了我的配置，但奇怪的是它不起作用。他网站上的演示也不起作用。当您单击具有预设值的输入时，日历实际上不起作用。至少我不认为它应该以它应该的方式运行。如果单击输入，则不会发生任何事情。您需要清除该值，然后单击。这使得日期选择器出现。理想情况下，日期选择器将显示预设值。 ://
andybeli - 感谢您的回复。我也试过了，但没有运气。不知道发生了什么。
@chetank 你的链接出错了

标签： jquery datepicker date-range daterangepicker

【解决方案1】：

在 Daterangepicker 中，我们必须在 startDate 和 endDate 参数中传递值。

$('#daterange').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });

注意：这里我们必须以“m/d/Y”格式传递日期，因为这是默认类型，除非您没有在语言环境数组中指定格式。

locale: {
      format: 'M/DD hh:mm A'
    }

【讨论】：

【解决方案2】：

插件需要一个实际的日期对象才能运行。幸运的是，您的 value="" 字符串足以使用 new Date() 创建这样的对象：

<div class="datepicker-to-from">
    <input type="date" id="startTimestamp" class="date-picker" value="11/18/2012 05:45">

    <input type="date" id="endTimestamp" class="date-picker" value="04/09/2014 5:00">
</div>

$(function(){
$('.datepicker-to-from').dateRangePicker({
    format: 'MM/DD/YYYY HH:mm',
    showShortcuts: false,
    time: {
        enabled: true
    }
 });

 // get values and create Date objects
 var date1 = new Date($('#startTimestamp').val());
 var date2 = new Date($('#endTimestamp').val());

 // set the values
 $('#startTimestamp).val(fancy_date(date1));
 $('#endTimestamp').val(fancy_date(date2))

 // formatting 
 function addZero(i) {
     if (i < 10) {
         i = "0" + i;
     }
     return i;
 }

 function fancy_date(dateObj) {
     return addZero(dateObj.getMonth()) + 
      '/' + addZero(dateObj.getDate()) + 
      '/' + addZero(dateObj.getFullYear()) + 
      ' ' + addZero(dateObj.getHours()) + 
      ':' + addZero(dateObj.getMinutes());
  }
  });

如果您绝对需要显示上午/下午，请查看此answer。适应这个应该不难。

标准的 setter 和 getter 以及 $(dom).setDate() 可能会很痛苦，因为您正在处理两个输入字段，它们无论如何都会保存您想要的值。

我从 w3 js 中窃取了 addZero 函数，您可以查看Dates 了解更多信息。

【讨论】：

感谢@The F 为您的答案付出的努力。不幸的是，它没有产生任何与我尝试过的许多变化不同的结果。我尝试了与您的功能非常相似的东西。由于某种原因，日期选择器不会将默认值作为属性或在 js 中设置。带有各种日期选择器选项的事件。嗯...
你确定改变format选项，并且在加载dom之后触发你的js吗？ $(function(){}); 我在一个项目中需要类似的功能，而 Date 对象可以解决问题。不要放弃（：
作为记录，请在示例页面中尝试此代码。我刚刚在#range200 + #range201 上测试了这个（因为有 2 个输入），我想向你保证这是可行的。这一定是你忽略的一件小事。祝你好运！
F - 感谢您的帮助。我正在俯瞰一些东西。在加载 DOM 后，我尝试再次设置它。基本上上面的@andybeli 建议这样做。我之前尝试过，但我只是意识到我忽略了一些东西。长时间盯着某事会让你错过明显的东西！我只需要这个：$('.datepicker-to-from').data('dateRangePicker').setDateRange('10/31/2012 11:00 AM','12/25/2014 21:00 PM'); 感觉像个傻瓜，我一直把错误的东西作为选择器，甚至没有第二次猜测。这是漫长的一周...感谢大家的帮助！

【解决方案3】：

如果使用多个输入

var fromDate = new Date();
$('input[id="dates-available-from"]').daterangepicker({
  singleDatePicker: true,
  showDropdowns: true,
  autoApply:true,
  locale: {
    format: 'YYYY-MM-DD'
  },
 minDate:new Date()
 },
 function(start, end, label) {
  fromDate =  start.format('YYYY-MM-DD');   
  $('input[id="dates-available-to"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    autoApply:true,
    locale: {
      format: 'YYYY-MM-DD'
    },
    minDate:fromDate
 });
});

【讨论】：