Python - 将树变成HTML日历

时间:2014-04-03 14:38:09

标签: python html5 tree bottle

使用此:

def Tree(): return defaultdict(Tree)

我为日历创建了一个可用日期树:

calendar = Tree()
# print calendar

calendar['2013']['10']=['1','2','3','4','6']
calendar['2013']['12']=['5','7','12']
calendar['2013']['11']=['8','10','19']

calendar['2014']['1']=['1','2','3','4','6']
calendar['2014']['2']=['5','7','12']
calendar['2014']['3']=['8','10','19']

print calendar

    for year in calendar:
        print "year:",year
        for month in calendar[year]:
            print "\tMonth:",month
            for day in calendar[year][month]:

打印“\ t \ tday:”,天

如何在HTML <input type="date">中将这些日期作为唯一可用日期?

我正在使用瓶子,并且可以将树作为变量传递:

@bottle.route('/test')
def run_test_page():

    calendar = Tree()
    calendar['2013']['10']=['1','2','3','4','6']
    calendar['2013']['12']=['5','7','12']
    calendar['2013']['11']=['8','10','19']

    calendar['2014']['1']=['1','2','3','4','6']
    calendar['2014']['2']=['5','7','12']
    calendar['2014']['3']=['8','10','19']

    return bottle.template('main/test.tpl', {'date_list': calendar})

到目前为止我的main / test.tpl:

{{date_list}}
<br><br>        
<input type="date">

编辑:刚刚意识到输入类型='日期'在IE和Chrome中不起作用...所以我可能不得不使用datepicker或一些js?

1 个答案:

答案 0 :(得分:0)

我找到了一个解决方案,但它可能是圆形的。可能更pythonic?

首先,我将树改为两位数日期:

@bottle.route('/test')
def run_test_page():

    calendar = Tree()
    calendar['2013']['10']=['01','02','03','04','06']
    calendar['2013']['12']=['05','07','12']
    calendar['2013']['11']=['08','10','19']

    calendar['2014']['01']=['01','02','03','04','06']
    calendar['2014']['02']=['05','07','12']
    calendar['2014']['03']=['08','10','19']
    calendar['2014']['04']=['01','02','03','04']
    return bottle.template('main/test.tpl', {'date_list': calendar})

其次,这是test.tpl文件(我知道我应该有一个单独的js文件):

<head>
    <script src="jquery-2.1.0.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="jquery.ui.core.js"></script>
    <script src="jquery.ui.datepicker.js"></script>


</head>

<p>{{date_list}}</p>


<p>available dates for 2013: {{date_list['2013']}}</p>
<p>available dates for 2014: {{date_list['2014']}}</p>
%available_dates = ""
<p>available days:
    %for year in date_list:
    {{year}}
    %for month in date_list[year]:
    %for day in date_list[year][month]:
    %available_dates+= month+"-"+day+"-"+year+","
    %end
    %end
    %end
    %available_dates=available_dates[:-1] # get rid of last comma
</p>
<input id='availableDates' type="hidden" value="{{available_dates}}">
<br><br>
Select Start Date:
<input name="start_date" class="datepicker" id="start_date" type="text">


<script>
    var availableDates = ($('#availableDates').val()).split(",");

    function available(date) {
        dmy =  ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) + "-" + date.getFullYear();
        console.log(dmy)
        if ($.inArray(dmy, availableDates) !== -1) {
            return [true, "", "Available"];
        } else {
            return [false, "", "unAvailable"];
        }
    }

    $(function(){
    $("#start_date").datepicker({
        dateFormat: "mm-dd-yy",
        beforeShowDay: available
        });
    });