带有 minDate 和 maxDate 的 JQuery datetimepicker 异常日 [英] JQuery datetimepicker exception day with minDate and maxDate

问题描述

我在使用 datetimepicker 时遇到问题.

I'm facing a issue with datetimepicker.

我有一个订单页面，上面有交货日期.

I have a page with an Order, that has a delivery date.

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

Whenever the Order is listed, the datetimepicker has a certain value (for example, some day last week.) I want to be able to edit it but only select a set of avaiable dates (from today up to 30 days including "some day last week"). How should I proceed?

选择器的功能:

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

我猜我的问题不是很明确.

I'm guessing i wasn't very explicit with my question.

我想要的例子:

minDate = 2017/10/14

minDate = 2017/10/14

最大日期 = 2017/10/30

maxDate = 2017/10/30

(此时一切正常)

我想选择的日期选项 = 2017/09/10(比 minDate 早 1 个月)而不更改 minDate！

Date option that i want to pick = 2017/09/10 (that is 1 month older than minDate) without changing minDate!

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

I want to create an exception date that is not inside the range of min/max date.

推荐答案

对于显示的选项，我猜你正在使用 eonasdan-datetimepicker.

For the options showed I guess you are using 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,
 });

其中 maxDate 将使用矩方法添加 30 天 <代码>.add()对于 minDate 使用 startOf 会更容易('day') 与您拥有的相同，但更易于阅读.

Where maxDate will have 30 days added using moment method .add() for minDate It is easier if you use startOf('day') as will be the same you have, but easier to read.

编辑

好的，所以您想要的是允许您的用户选择不在数组中的特殊日子"，因此您可以使用 enabledDates 选项.

Ok so what you want is to allow your users to choose a "special day" that is not in the array, so for that you could use enabledDates option.

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

In which you will add your special day and the range of the days enabled, so only thus will be allowed to be selected and would be something like this:

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/

更容易更改格式和特殊日期

Make easier to change format and special date

这篇关于带有 minDate 和 maxDate 的 JQuery datetimepicker 异常日的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！