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

igsr9ssn 于 2023-03-22 发布在 jQuery

关注(0)|答案(3)|浏览(180)

https://github.com/longbill/jquery-date-range-picker
我的一切都运行得很好，但我似乎无法让选择器使用我在中设置的默认值。有两个输入，开始日期和结束日期。我有一个value="”，其中两个日期都应该是日期选择器的默认日期。然后用户可以更改这些日期。
我已经尝试了一些不同的想法，但是我不能得到任何东西来获取输入的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()
});

**更新4/10/2015：**在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);

jquery

来源：https://stackoverflow.com/questions/29549542/set-dates-for-jquery-date-range-picker-from-input-values

3条答案

按热度按时间

kupeojn61#

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

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

注意：这里我们必须传递“m/d/Y”格式的Date，因为这是默认类型，除非你没有在locale数组中指定格式。

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

赞(0）回复(0）举报 2023-03-22

nsc4cvqm2#

这个插件需要一个实际的日期对象来运行。幸运的是，你的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());
  }
  });

如果你绝对需要显示AM/PM，请检查这个answer。适应这个应该不会很难。
标准的setter和getter，以及$(dom).setDate()可能会很麻烦，因为您要处理的是两个输入字段，无论如何它们都包含您想要的值。
我从w3 js中窃取了addZero函数，您可以查看Dates以获取更多信息。

赞(0）回复(0）举报 2023-03-22

mwyxok5s3#

如果使用多个输入

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
 });
});

赞(0）回复(0）举报 2023-03-22

我来回答

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

3条答案

相关问题

热门标签

最新问答