繁体   English   中英

jQuery datetimepicker异常日,带有minDate和maxDate

[英]JQuery datetimepicker exception day with minDate and maxDate

我遇到了datetimepicker问题。

我有一个带有订单的页面,该页面有一个交货日期。

每当列出订单时,datetimepicker都会具有某个值(例如,上周的某天。)我希望能够对其进行编辑,但只能选择一组可用的日期(从今天到30天,包括“最后一天”)周”)。 我应该如何进行?

选择器的功能:

var maxdate = new Date();
maxdate.setDate(maxdate.getDate() + 30);
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
      format: 'YYYY/MM/DD',
      useCurrent:true,
      showClose:true,
      defaultDate: $.now(),
      minDate: moment().millisecond(0).second(0).minute(0).hour(0),
      maxDate:maxdate,
 });

编辑:

我猜我对我的问题不是很明确。

我想要的例子:

minDate = 2017/10/14

maxDate = 2017/10/30

(此时一切正常)

我要选择的日期选项= 2017/09/10(比minDate大1个月)而不更改minDate!

我想创建一个不在最小/最大日期范围内的例外日期。

对于显示的选项,我想您正在使用eonasdan-datetimepicker

所以像这样继续:

var maxDate = moment().add(30, 'day');
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
      format: 'YYYY/MM/DD',
      useCurrent: true,
      showClose: true,
      defaultDate: $p.now(),
      minDate: moment().startOf('day'),
      maxDate: maxDate,
 });

如果使用minDate矩方法.add()maxDate添加了30天,则使用startOf('day')会更容易,就像您拥有的一样,但更易于阅读。

编辑

好的,所以您要允许用户选择不在数组中的“特殊日期”,因此可以使用enabledDates选项。

您将在其中添加特殊日期和启用的日期范围,因此只有这样才能被选择,并且将是这样的:

let currentFormat = 'YYYY/MM/DD';
let specialDay = '2017/09/10';
let maxDate = moment().add(30, 'day'); //To the picker not allow to go further in the view
let startDate = moment().startOf('day').format(currentFormat); //First date being added, current day
let enabledDates = [
  moment(specialDay, currentFormat), //this is our "special day"
  moment(startDate, currentFormat) // we format the date to the format needed    ];

//Iterate and add 30 days, and only those will be able to be picked
for (var i = 1; i <= 30; i++) {
  //apply the format
  let date = moment().add(i, 'day').format(currentFormat);
  enabledDates.push(moment(date, currentFormat));
}

//We init our picker with the 30 days and our special date
//`minDate` and `maxDate` still there to give the style to the view 
$("#myDatepicker").datetimepicker({
  format: currentFormat,
  useCurrent: false,
  showClose: true,
  minDate: moment(specialDay, currentFormat),
  maxDate: maxDate,
  enabledDates: enabledDates,
});

工作小提琴https://jsfiddle.net/William_/2ze7bo27/

编辑:更容易更改格式和特殊日期

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM