开发者

How to generalize the functions in Javascript

I have fromDate and toDate text boxes and when I select icon beside text boxes Calender will be displayed and when I select a date that date will be displayed in corresponding text boxes.

My intention is to use single generalized function for both toDate and fromDates. How can I do that, I am using YUI Calender and here is my code:

<td>
    <strong>From Date</strong>
</td>
<td>
    <input type="text" name="fromDate" id="fromDate" value="" size=15>
    <img id="calendarFromIcon" src="${resource(dir: "images",    file: "calendar_icon.jpg")}" />
    <div  id="calendarFromContainer"></div>
</td>
<td>
    <strong>To Date</strong>
</td>
<td>
    <input type="text" name="toDate" id="toDate" value="" size=15>
    <img id="calendarToIcon" src="${resource(dir: "images", file: "calendar_icon.jpg")}" />
    <div  id="calendarToContainer"></div>
</td>

and the script for this is:

var myFromCalendar = new YAHOO.widget.Calendar("calendarFromContainer", {
    close: true,
    navigator: true
});

myFromCalendar.render();
myFromCalendar.hide();

function handleSelect(type, args, obj) {
    var dates = args[0];
    var date = dates[0];
    var year = date[0];

    month = date[1];
    month = (month < 10) ? "0" + month : month;

    day = date[2];
    day = (day < 10) ? "0" + day : day;

    var txtDate1 = document.getElementById("fromDate");
    txtDate1.value = year+ "/"+ month + "/" + day;
    myFromCalendar.hide();
}

myFromCalendar.selectEvent.subscribe(handleSelect,myFromCalendar, true);

YAHOO.util.Event.addListener("calendarFromIcon", "click", function(e) {
    var calContainer = YAHOO.util.Dom.get("calendarFromContainer");

    var selectedDate = document.getElementById("fromDate");
    if (selectedDate.value) {
        var matches = selectedDate.value.match(/^\s*0?(\d+)\/0?(\d+)\/(\d+)\s*$/);
        var year = parseInt(matches[3]);
        var month = parseInt(matches[1]);
        var pageDate = month+"/"+year;

        myFromCalendar.cfg.s开发者_开发问答etProperty("pagedate", pageDate, false);
        myFromCalendar.cfg.setProperty("selected", selectedDate.value, false);
        myFromCalendar.render();
     }

     myFromCalendar.show();
});


You can use jquery to apply a single function to multiple HTML elements. Jqueries select function may help you.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜