1

私がやりたいのは、5 つのテキスト ボックス、カレンダー、およびボタンを使用して、日付ピッカー カレンダーでイベントを作成することだけです。

ここにフォーマットがあります

ここに画像の説明を入力

.setDate() と .getDate() についてすべて読みましたが、それらを機能させることができません。シンプルな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>
4

1 に答える 1

1

$("div").datepickerであり$("div.selector").datepicker、両方である必要があります$("#datepicker").datepicker。1 つ目はページ上のすべての DIV に日付ピッカーをアタッチしますが、2 つ目は class の DIV がないため機能しませんselector。

通常、フォーム内の要素には日付ピッカーが添付されている<input>ため、フォームを送信すると、選択した日付が送信されます。DIV に配置しているので<input type="hidden">、フォームに要素を追加できます。

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

日付ピッカーに次のオプションを追加します。

altField: "date",

名前付き関数と匿名関数の使用は、主に文体上の選択です。オプションや AJAX コールバックなど、短い関数が 1 つの場所でのみ使用される場合はonSelect、匿名関数としてインラインに配置するのが一般的です。

于 2013-05-09T17:22:35.787 に答える