索引数据框和日期的例子

比巴卜

大约一个小时之前，我给出了关于索引数据框的表示。有个参会者问了关于日期以及如何基于日期范围进行过滤。我告诉他我的设想是将日期转换为数值，然后使用数值相关的范围。但事实证明我错了，下面是一个例子。

开始，我创建了一个基于创建域的存储对象。我们目的是想通过日期来进行搜索，因此我使用创建这个名字。同时将存储对象命名为data。虽然看起来很无聊，但是很有用。

1. function doSeed() {
   
2. var now = new Date();
   
3. 
   
4. for(var i=0; i<10; i++) {
   
5. var dayDiff = getRandomInt(1, 7);
   
6. var thisDate = new Date();
   
7. thisDate.setDate(now.getDate() + dayDiff);
   
8. db.transaction(["data"],"readwrite").objectStore("data").add({created:thisDate});
   
9. }
   
10. }
    
11. 
    
12. //Credit: Mozilla Developer Center
    
13. function getRandomInt (min, max) {
    
14. return Math.floor(Math.random() * (max - min + 1)) + min;
    
15. }

复制代码

需要注意的是，由于索引数据框调用是异步的，因此代码需要处理更新，让用户知道什么时候操作结束了。由于这只是一个简单的演示，因此添加操作将很快结束，我就没必要担心了。

1. function doSearch() {
   
2. var fromDate = document.querySelector("#fromDate").value;
   
3. var toDate = document.querySelector("#toDate").value;
   
4. 
   
5. var range;
   
6. 
   
7. if(fromDate == "" && toDate == "") return;
   
8. 
   
9. var transaction = db.transaction(["data"],"readonly");
   
10. var store = transaction.objectStore("data");
    
11. var index = store.index("created");
    
12. 
    
13. if(fromDate != "") fromDate = new Date(fromDate);
    
14. if(toDate != "") toDate = new Date(toDate);
    
15. 
    
16. if(fromDate != "" && toDate != "") {
    
17. range = IDBKeyRange.bound(fromDate, toDate);
    
18. } else if(fromDate == "") {
    
19. range = IDBKeyRange.upperBound(toDate);
    
20. } else {
    
21. range = IDBKeyRange.lowerBound(fromDate);
    
22. }
    
23. 
    
24. var s = "";
    
25. index.openCursor(range).onsuccess = function(e) {
    
26. var cursor = e.target.result;
    
27. if(cursor) {
    
28. s += "<h2>Key "+cursor.key+"</h2><p>";
    
29. for(var field in cursor.value) {
    
30. s+= field+"="+cursor.value[field]+"
    
31. ";
    
32. }
    
33. s+="</p>";
    
34. cursor.continue();
    
35. }
    
36. document.querySelector("#status").innerHTML = s;
    
37. }
    
38. 
    
39. }

复制代码

现在就可以创建一个应用程序，它可以让我们添加包含Javascript合法日期的创建属性。请注意，我没有将它转为毫秒，而是直接传入。

最后只需在页面上添加两个日期域即可。在Chrome里还是不错的。

根据上述，我就可以创建一个上限，下限范围的索引数据框，并能在日期前，后或者在日期范围内的提示。

此处唯一需要转换的就是将用户的输入转换为真正的日期对象，这样就可以运行了。

运行下面的演示：

http://www.raymondcamden.com/demos/2013/jun/6/test1.html