日期时间选择器:如何根据 SQL 数据库设置 min/max 日期
Date time Picker: how to set the min/max date based on SQL database
有两列:年份;一月 MySQL table。
现在我已经实现了在html中显示下拉日期table(Y/M)的功能。 (基于 dJango + jquery 日期时间选择器)。我在下面附上了这部分代码;
下一步是根据 SQL table 中的 earliest/latest 日期 (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)
您可以做的是通过数据属性将 min/max 日期范围添加到您的 start_date 字段,如下所示
widgets = {
'start_date': forms.DateInput(attrs={
'class':'datepicker', 'data-min': YOUR_MIN_DATE,
'data-max': YOUR_MAX_DATE}),
}
然后在你的日期选择器初始化脚本中使用这个属性,就像这样
minDate: $(this).data('min'),
maxDate: $(this).data('max'),
有两列:年份;一月 MySQL table。 现在我已经实现了在html中显示下拉日期table(Y/M)的功能。 (基于 dJango + jquery 日期时间选择器)。我在下面附上了这部分代码;
下一步是根据 SQL table 中的 earliest/latest 日期 (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)
您可以做的是通过数据属性将 min/max 日期范围添加到您的 start_date 字段,如下所示
widgets = {
'start_date': forms.DateInput(attrs={
'class':'datepicker', 'data-min': YOUR_MIN_DATE,
'data-max': YOUR_MAX_DATE}),
}
然后在你的日期选择器初始化脚本中使用这个属性,就像这样
minDate: $(this).data('min'),
maxDate: $(this).data('max'),