【问题标题】:Date time Picker: how to set the min/max date based on SQL database日期时间选择器:如何基于 SQL 数据库设置最小/最大日期
【发布时间】:2016-01-09 13:28:22
【问题描述】:

有两列:年份;一个 MySQL 表中的月份。 现在我已经实现了在html中显示下拉日期表(Y/M)的功能。 (基于 dJango + jquery 日期时间选择器)。我在下面附上了这部分代码;

下一步是根据 SQL 表中的最早/最晚日期 (Y/M) 限制日期范围。然后我不知道如何根据SQL数据库设置这个mindate和maxdate。非常感谢任何指导。

HTML

<!DOCTYPE html>  
<html> 
<head>  
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>  
    <title>Input Table</title>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

 <script type="text/javascript">
    $(function() {
 $('.date-picker').datepicker(
                {
                    dateFormat: "mm/yy",
                    changeMonth: true,
                    changeYear: true,
                    showButtonPanel: true,
                    mindate:  ***-------How to write the code here to get SQL date range?***


                    onClose: function(dateText, inst) {


                        function isDonePressed(){
                            return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
                        }

                        if (isDonePressed()){
                            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                            $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');

                             $('.date-picker').focusout()//Added to remove focus from datepicker input box on selecting date
                        }
                    },
                    beforeShow : function(input, inst) {

                        inst.dpDiv.addClass('month_year_datepicker')

                        if ((datestr = $(this).val()).length > 0) {
                            year = datestr.substring(datestr.length-4, datestr.length);
                            month = datestr.substring(0, 2);
                            $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
                            $(this).datepicker('setDate', new Date(year, month-1, 1));
                            $(".ui-datepicker-calendar").hide();
                        }
                    }
                })
});
</script>

form.py

class inputform(forms.ModelForm):
    company=forms.CharField() 
    start_date=forms.DateField(widget=DateInput())

class Meta:
    model = input
    fields = ('company','start_date')
    widgets = {
        'start_date': forms.DateInput(attrs={'class':'datepicker'}),
    }

views.py

@csrf_exempt
def input(request):
    if request.method == 'POST': 
        form = inputform(request.POST) 
        if form.is_valid(): 

            start_date=form.cleaned_data('start_date')
            return HttpResponseRedirect('templates/About') 

else:
    form = inputform() 

return render_to_response('inputform.html',{'form': form})

model.py

from datetime import date
from django.forms import widgets

class input(models.Model):
    company=models.CharField(max_length=100)
    start_date=models.DateField(auto_now=False, auto_now_add=False)

【问题讨论】:

    标签: python mysql django datetimepicker


    【解决方案1】:

    您可以做的是通过数据属性将最小/最大日期范围添加到您的 start_date 字段中

    widgets = {
        'start_date': forms.DateInput(attrs={
            'class':'datepicker', 'data-min': YOUR_MIN_DATE, 
            'data-max': YOUR_MAX_DATE}),
    }
    

    然后在你的 datepicker 初始化脚本中使用这个属性

    minDate: $(this).data('min'),
    maxDate: $(this).data('max'),
    

    【讨论】:

    • 嗨@Nick,这是我怀疑如何输入'date-min'和'date-max'的原因,因为结果来自sql数据库,而不是预定义的日期。
    猜你喜欢
    • 2021-10-27
    • 2020-05-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多