datepicker簡單事件創建

我想要做的就是使用5個文本框，一個日曆和一個按鈕在日期選擇器日曆上創建事件。datepicker簡單事件創建

這是我看過所有關於.setDate（）和.getDate（）格式

enter image description here

，但我不能讓他們的工作。我沒有插件只有簡單的HTML和JavaScript的經驗。什麼是datepicker對象被調用，爲什麼每個人的代碼都沒有爲他們的函數命名？

任何與這個插件的經驗應該能夠做到這一點是在5秒內

這裏是我的代碼

<!DOCTYPE html> 
<html> 
<head> 

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>jQuery &amp; jQueryUI Base - jsFiddle demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script> 
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
    <link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css"> 
    <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script> 
    <style type='text/css'> 
    table.ui-datepicker-calendar tbody td.highlight > a { 
    background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80; 
    color: #363636; 
    border: 1px solid #FFDE2E; 
} 

    </style> 



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
var equip = document.getElementById('equipment').value; 
var size = document.getElementById('size').value; 
var surface = document.getElementById('surface').value; 
var orderNumber = document.getElementById('orderNumber').value; 
var responsible = document.getElementById('responsible').value; 


var events = [ 
    { Title: "Equipment: " + equip + "\nSize: " + size + dated + 
    "\nRequired on Surface: " + surface + "\nWork Order Number: " + orderNumber + "\nResponsible: " + responsible, Date: new Date("05/13/2013") }, 
    { Title: "Dinner", Date: new Date("02/25/2011") }, 
    { Title: "Meeting with manager", Date: new Date("03/01/2011") } 
]; 


$("div").datepicker({ 

    beforeShowDay: function(date) { 
     var result = [true, '', null]; 
     var matching = $.grep(events, function(event) { 
      return event.Date.valueOf() === date.valueOf(); 
     }); 

     if (matching.length) { 
      result = [true, 'highlight', null]; 
     } 
     return result; 
    }, 
    onSelect: function(dateText) { 
     var date, 
      selectedDate = new Date(dateText), 
      i = 0, 
      event = null; 

     while (i < events.length && !event) { 
      date = events[i].Date; 

      if (selectedDate.valueOf() === date.valueOf()) { 
       event = events[i]; 
      } 
      i++; 
     } 
     if (event) { 
      alert(event.Title); 
     } 
    } 
}); 

});//]]> 



var dated = $("div.selector").datepicker("getDate"); 

function alerter(form) {alert (form.size.value)} 
function dog() {div.setDate("+2d");} 


function submit(form){ 
var equip1 = form.equipment.value; 
var size1 = form.size.value; 
var surface1 = form.surface.value; 
var orderNumber1 = form.orderNumber.value; 
var responsible1 = form.responsible.value; 
var inputDate1 = form.inputDate.value 

var events = [ 
    { Title: "Equipment: " + equip1 + "\nSize: " + size1 + 
    "\nRequired on Surface: " + surface1 + "\nWork Order Number: " + orderNumber1 + "\nResponsible: " + responsible1, Date: new Date(inputDate1) }, 
    { Title: "Dinner", Date: new Date("05/25/2013") }, 
    { Title: "Meeting with manager", Date: new Date("03/01/2011") } 
]; 
} 
</script> 


</head> 
<body> 
    <FORM> 
    Equipment: <input type='text' id='equipment' /> <br /> 
    Size: <input type='text' id='size' /> <br /> 
    Required on Surface: <input type='checkbox' id='surface' /> <br /> 
    Work Order Number: <input type='text' id='orderNumber' /> <br /> 
    Responsible: <input type='text' id='responsible' /> <br /> 

    <div id="datepicker"></div> 
    <button type="button" onclick="alerter(this.form)">Add Lowering Event</button><br> 
    </FORM> 
</body> 


</html>

編輯的代碼：

<!DOCTYPE html> 
<html> 
<head> 

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>jQuery &amp; jQueryUI Base - jsFiddle demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script> 
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
    <link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css"> 
    <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script> 
    <style type='text/css'> 
    table.ui-datepicker-calendar tbody td.highlight > a { 
    background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80; 
    color: #363636; 
    border: 1px solid #FFDE2E; 
} 

    </style> 



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
var equip = document.getElementById('equipment').value; 
var size = document.getElementById('size').value; 
var surface = document.getElementById('surface').value; 
var orderNumber = document.getElementById('orderNumber').value; 
var responsible = document.getElementById('responsible').value; 
var date = document.getElementById('dateds').value 

var events = [ 
    { Title: "Equipment: " + equip + "\nSize: " + size + date + 
    "\nRequired on Surface: " + surface + "\nWork Order Number: " + orderNumber + "\nResponsible: " + responsible, Date: new Date(date) }, 
    { Title: "Dinner", Date: new Date("02/25/2011") }, 
    { Title: "Meeting with manager", Date: new Date("03/01/2011") } 
]; 


$("#datepicker").datepicker({ 

    beforeShowDay: function(date) { 
     var result = [true, '', null]; 
     var matching = $.grep(events, function(event) { 
      return event.Date.valueOf() === date.valueOf(); 
     }); 

     if (matching.length) { 
      result = [true, 'highlight', null]; 
     } 
     return result; 
    }, 
    onSelect: function(dateText) { 
     var date, 
      selectedDate = new Date(dateText), 
      i = 0, 
      event = null; 

     while (i < events.length && !event) { 
      date = events[i].Date; 

      if (selectedDate.valueOf() === date.valueOf()) { 
       event = events[i]; 
      } 
      i++; 
     } 
     if (event) { 
      alert(event.Title); 
     } 
    } 
}); 

});//]]> 



var dated = $("#datepicker").datepicker("getDate"); 

function alerter() {alert (dated)} 
function dog() {div.setDate("+2d");} 


function submit(form){ 
var equip1 = form.equipment.value; 
var size1 = form.size.value; 
var surface1 = form.surface.value; 
var orderNumber1 = form.orderNumber.value; 
var responsible1 = form.responsible.value; 
var inputDate1 = form.inputDate.value 

var events = [ 
    { Title: "Equipment: " + equip1 + "\nSize: " + size1 + 
    "\nRequired on Surface: " + surface1 + "\nWork Order Number: " + orderNumber1 + "\nResponsible: " + responsible1, Date: new Date(inputDate1) }, 
    { Title: "Dinner", Date: new Date("05/25/2013") }, 
    { Title: "Meeting with manager", Date: new Date("03/01/2011") } 
]; 
} 
</script> 


</head> 
<body> 
    <FORM> 
    Equipment: <input type='text' id='equipment' /> <br /> 
    Size: <input type='text' id='size' /> <br /> 
    Required on Surface: <input type='checkbox' id='surface' /> <br /> 
    Work Order Number: <input type='text' id='orderNumber' /> <br /> 
    Responsible: <input type='text' id='responsible' /> <br /> 
    Date: <input type="text" id="dateds" /></p> 

    <div id="datepicker"></div> 
    <button type="button" onclick="alerter()">Add Lowering Event</button><br> 
    </FORM> 
</body> 


</html>

來源

2013-05-09 user2343714

我認爲datepicker必須應用於文本（或日期）輸入字段，而不是DIV。 – Barmar 2013-05-09 14:58:09

@Barmar - 請參閱http://jqueryui.com/datepicker/#inline。「顯示嵌入在頁面中的日期選擇器而不是疊加層，只需在div上調用.datepicker（）而不是輸入。」 – j08691 2013-05-09 17:13:18

爲什麼你包括'jQuery'和'jQuery UI'兩個版本？另外，'normalize.css'傳統上首先被加載，因爲它是一種重置樣式表。 – Mathletics 2013-05-09 19:46:06

$("div").datepicker和$("div.selector").datepicker不僅應是$("#datepicker").datepicker。第一個會在您的頁面上爲每個DIV附加日期選擇器，第二個不起作用，因爲您沒有類selector的DIV。

通常情況下，日期選擇器會附加到表單中的<input>元素，因此當您提交表單時，將會提交選定的日期。既然你把它在一個DIV，你可以一個<input type="hidden">元素添加到窗體：

<input type="hidden" name="date" id="date">

，並添加以下選項的日期選擇器：

altField: "date",

使用命名與匿名函數主要是一個文體選擇。如果僅在一個地方使用短功能，例如onSelect選項或AJAX回調，則通常將其作爲匿名函數內聯。

來源

2013-05-09 17:22:35 Barmar

當我切換$（「div」）。datepicker與$（「＃datepicker」）我的日曆消失。和切換$（「div.selector」）仍然給我不確定，每當我調用這樣的代碼VAR = =（「＃datepicker」）。datepicker（「getDate」）;函數alerter（）{alert（dated）}
– user2343714 2013-05-09 19:32:02

對不起，我對此很不好，我對html不太舒服。我的班上很久以前就讀過高中。我不知道你的意思是添加一個，因爲我不明白onSelect如何鏈接到隱藏的輸入並允許我提取日期。 – user2343714 2013-05-09 19:36:33

在選擇器之後，你仍然需要'.datepicker（...）'，我解決了我的答案。如果用戶還沒有選擇日期，'getDate'將返回undefined，除非您設置了默認日期。 – Barmar 2013-05-09 19:37:13

datepicker簡單事件創建

回答

相關問題