求一个js日期时间控件，我有一个例子，但功能不能实现

Posted 2023-04-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求一个js日期时间控件，我有一个例子，但功能不能实现相关的知识，希望对你有一定的参考价值。

一下是我的例子，要实现的功能是通过前面的select可以控制后面的js时间控件，根据select的值显示在<input>中，比如选择一周，那么开始时间就是从当前时间向前推一周，结束时间就是当前时间，
<input>中是一个js时间控件
<script type="text/javascript" src="include/new_aeroncalendar.js"></script>
<form>
<select name="time">
<option value="1">一周</option>
<option value="1">一个月</option>
<option value="1">三个月</option>
<option value="1">半年</option>
<option value="1">一年</option>
</select>
<input type="text" id="endtime" onclick="SelectDate(this,'yyyy-MM-dd hh:mm:ss')" value="开始时间"/>
<input type="text" id="endtime" onclick="SelectDate(this,'yyyy-MM-dd hh:mm:ss')" value="结束时间"/>
</form>

控件效果可以实现，但不是我想要的。

参考技术A

My97DatePicker日期控件，这个插件里边有你要的效果，你没想到的都有！

参考技术B v

Moment js日期时间比较

【中文标题】Moment js日期时间比较【英文标题】：Moment js date time comparison 【发布时间】：2014-05-01 07:19:33 【问题描述】：

我正在使用 moment.js 来格式化我的日期时间，这里我有两个日期值，我想在一个日期大于另一个日期时实现一个特定的功能。我阅读了他们的大部分文档，但没有找到实现这一点的功能。我知道它会在那里。

这是我的代码：

var date_time = 2013-03-24 + 'T' + 10:15:20:12 + 'Z'
var d = moment(date_time).tz('UTC'); // first date 

var now = new Date(),
    dnow = moment(now).tz('UTC'),
    snow = dnow.minute() % 15,
    diffnow = 15 - snow,
    tonow = moment(dnow).add('minute', diffnow),
    ahead30now = moment(tonow).add('minute', 30);

if (d > ahead30now) 
    // allow input time
    console.log('UTC TIME DB', d.format());
 else

编辑

var date_time = req.body.date + 'T' + req.body.time + req.body.timezone; // 2014-03-24T01:15:000
var utc_input_time = moment(date_time).utc(); // 2014-03-24T01:15:000
console.log('utc converted date_time', moment(date_time).utc().format("YYYY-MM-DDTHH:mm:SSS"));
var isafter = moment(utc_input_time).isAfter(moment('2014-03-24T01:14:000')); // true
if(isafter === true)
    console.log('is after true');
 else 
    console.log('is after is false');

在这里，我比较两个日期，即2014-03-24T01:15:000 > 2014-03-24T01:14:000，期望第一个大于第二个，但它总是进入 else 条件。不知道为什么？

【问题讨论】：

【参考方案1】：

我相信您正在寻找query functions、isBefore、isSame 和isAfter。

但是要准确地判断您正在尝试什么有点困难。也许您只是想了解输入时间和当前时间之间的差异？如果是这样，请考虑difference function、diff。例如：

moment().diff(date_time, 'minutes')

其他一些事情：

第一行有错误：

  var date_time = 2013-03-24 + 'T' + 10:15:20:12 + 'Z'

那是行不通的。我想你的意思是：

  var date_time = '2013-03-24' + 'T' + '10:15:20:12' + 'Z';

当然，你也可以：

  var date_time = '2013-03-24T10:15:20:12Z';

您正在错误地使用：.tz('UTC')。 .tz 属于 moment-timezone。除非您使用其他时区，例如 America/Los_Angeles，否则您不需要使用它。

如果要将值解析为 UTC，则使用：

  moment.utc(theStringToParse)

或者，如果您想解析本地值并将其转换为 UTC，则使用：

  moment(theStringToParse).utc()

或者你根本不需要它。仅仅因为输入值是 UTC，并不意味着您必须在整个函数中使用 UTC。

您似乎正在通过moment(new Date()) 获取“现在”实例。您可以改用moment()。

更新

根据您的编辑，我认为您可以这样做：

var date_time = req.body.date + 'T' + req.body.time + 'Z';
var isafter = moment(date_time).isAfter('2014-03-24T01:14:00Z');

或者，如果您想确保验证您的字段格式正确：

var m = moment.utc(req.body.date + ' ' + req.body.time, "YYYY-MM-DD  HH:mm:ss");
var isvalid = m.isValid();
var isafter = m.isAfter('2014-03-24T01:14:00Z');

【讨论】：

【参考方案2】：

你应该可以直接比较它们。

var date = moment("2013-03-24")
var now = moment();

if (now > date) 
   // date is past
 else 
   // date is future

$(document).ready(function() 
  
  $('.compare').click(function(e) 
  
    var date = $('#date').val();
  
    var now = moment();
    var then = moment(date);
  
    if (now > then) 
      $('.result').text('Date is past');
     else 
      $('.result').text('Date is future');
    

  );

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>



<input type="text" name="date" id="date" value="2014-12-18"  placeholder="yyyy-mm-dd">
<button class="compare">Compare date to current date</button>
<br>
<div class="result"></div>

【讨论】：

我觉得这是值得解释的，因为 javascript 通过Object.prototype.valueOf 将对象强制转换为基元，它在时刻原型中被覆盖，以将纪元时间戳作为数字返回。所以这类似于now.format('x') > date.format('x')。不，它不起作用...这是我尝试过的。 // newDate 高于现在的日期...所以它在大于和小于条件下都打印失败 const resDate = res.url.expiryDate; const newDate = moment(resDate); var now = moment().format("DD/MM/YYYY"); if (now @steve moment().format("DD/MM/YYYY") 将返回一个字符串，然后您按字母顺序进行比较，然后 12 月 1 日将在 1 月 2 日之前出现，因为您也领先于天。如果要直接比较矩对象，请不要使用format()。【参考方案3】：

在使用momentjs queries：isBefore、isAfter、isSameOrBefore、isSameOrAfter、isBetween 时，您的日期时间必须采用正确的 ISO 格式，这一点很重要

因此，您的日期时间应该是：

2014-03-24T01:14:00 或 2014-03-24T01:14:00.000Z

否则您可能会收到以下弃用警告，并且条件将评估为 false：

弃用警告：提供的值不在公认的 RFC2822 中或 ISO 格式。时刻构造回退到 js Date()，这不是在所有浏览器和版本中都可靠。非 RFC2822/ISO 日期格式不鼓励，将在即将到来的专业中删除发布。请参阅 http://momentjs.com/guides/#/warnings/js-date/ 了解更多信息。

// https://momentjs.com/docs/#/query/

const dateIsAfter = moment('2014-03-24T01:15:00.000Z').isAfter(moment('2014-03-24T01:14:00.000Z'));

const dateIsSame = moment('2014-03-24T01:15:00.000Z').isSame(moment('2014-03-24T01:14:00.000Z'));

const dateIsBefore = moment('2014-03-24T01:15:00.000Z').isBefore(moment('2014-03-24T01:14:00.000Z'));

console.log(`Date is After: $dateIsAfter`);
console.log(`Date is Same: $dateIsSame`);
console.log(`Date is Before: $dateIsBefore`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"
></script>

【讨论】：

【参考方案4】：

Jsfiddle：http://jsfiddle.net/guhokemk/1/

 function compare(dateTimeA, dateTimeB) 
    var momentA = moment(dateTimeA,"DD/MM/YYYY");
    var momentB = moment(dateTimeB,"DD/MM/YYYY");
    if (momentA > momentB) return 1;
    else if (momentA < momentB) return -1;
    else return 0;


alert(compare("11/07/2015", "10/07/2015"));

如果 dateTimeA 大于 dateTimeB，该方法返回 1

如果 dateTimeA 等于 dateTimeB，则该方法返回 0

如果 dateTimeA 小于 dateTimeB，该方法返回 -1

【讨论】：

【参考方案5】：

对于日期时间比较，您可以使用时刻的valueOf函数，它提供日期时间的毫秒数，最适合比较：

const date1 = moment('01-02-2020', 'DD-MM-YYYY').valueOf()
const date2 = moment('11-11-2012', 'DD-MM-YYYY').valueOf()

// console.log((date1 > date2 ? 'date1' : 'date2') + " is greater..."  )

if (date1 > date2) 
  console.log("date1 is greater...")
 else 
  console.log("date2 is greater...")

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"&gt;&lt;/script&gt;

【讨论】：

【参考方案6】：

moment(d).isAfter(ahead30now); // true

http://momentjs.com/docs/#/query/is-after/

if (moment(d).isAfter(ahead30now)) 
    // allow input time
    console.log('UTC TIME DB', d.format());
 else

【讨论】：

【参考方案7】：

像这样将日期传递给时刻，它将比较并给出结果。如果你不想格式化删除它

moment(Date1).format("YYYY-MM-DD") > moment(Date2).format("YYYY-MM-DD")

【讨论】：

Be careful 这不过是比较两个字符串 @PranoySarkar 你能告诉我为什么我们需要更加小心吗？我认为关键是您需要在这里小心，因为您在使用.format 时实际上是在比较字符串，而不是日期。它适用于这种情况，因为它是年、月、日 ("YYYY-MM-DD")。但是，如果您的格式为 "MM-DD-YYYY" 或 "DD-MM-YYYY"，它可能不会按照您的意图进行（检查一个日期是否大于另一个日期）。例如。 "01-01-2021" > "12-12-1990" 将返回 false，因为它从第一个字符开始比较，并且 0 出现在 1 之前。因此，请注意它的格式设置为适用于所有情况。【参考方案8】：

var startDate = moment(startDateVal, "DD.MM.YYYY");//Date format
var endDate = moment(endDateVal, "DD.MM.YYYY");

var isAfter = moment(startDate).isAfter(endDate);

if (isAfter) 
    window.showErrorMessage("Error Message");
    $(elements.endDate).focus();
    return false;

【讨论】：

以上是关于求一个js日期时间控件，我有一个例子，但功能不能实现的主要内容，如果未能解决你的问题，请参考以下文章

js做的日期控件里怎样设置文本框里面不能手动输入日期

求一个bootstrap或者jQuery的日历控件

(高分,Android)求一个时间选择控件,支持选择一段时间

js日期控件限制选择日期（只能选择指定日期

c# time 控件怎么用...求例子

求JS两个日期之间的月份数