[英]Date picker with Twig and Javascript
這是我當前在Twig中用於datepicker的代碼(它只是靜態的,不是動態的,尚未與Form Type鏈接)
<div class="form-group">
<label>Date of Birth</label>
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>
</div>
以下是JavaScript代碼
<script src="{{ asset('bundles/hearwegohearwego/js/homepage/select-birthday.js') }}"></script>
<script type="text/javascript">
var today= new Date();
var yy= today.getFullYear();
var dd=today.getDate();
var mm=today.getMonth()+1;
selectBirthday("#year", "#month", "#day", {
year : 1938,
month : mm,
day : dd,
yearRange : 75,
endYear : yy
});
</script>
在select-birthday.js
function selectBirthday(yearSelector, monthSelector, daySelector, config) {
if (config == undefined) {
config = {};
}
if (config.year == undefined) {
config.year = new Date().getFullYear();
}
if (config.month == undefined) {
config.day = new Date().getMonth() + 1;
}
if (config.month == undefined) {
config.day = new Date().getDate();
}
if (config.yearRange == undefined) {
config.yearRange = 100;
}
if (config.endYear == undefined) {
config.endYear = new Date().getFullYear();
}
var birthdayYear = $(yearSelector);
if (birthdayYear.length == 0) {
throw "can not find 'year' select control";
}
for (var y = config.endYear; y > config.endYear - config.yearRange; y--) {
if (y == config.year) {
$('<option value="' + y + '" selected="selected">' + y + '</option>').appendTo(birthdayYear);
} else {
$('<option value="' + y + '" >' + y + '</option>').appendTo(birthdayYear);
}
}
var birthdayMonth = $(monthSelector);
if (birthdayMonth.length == 0) {
throw "can not find 'month' select control";
}
for (var m = 1; m <= 12; m++) {
if (m == config.month) {
$('<option value="' + m + '" selected="selected">' + m + '</option>').appendTo(birthdayMonth);
} else {
$('<option value="' + m + '">' + m + '</option>').appendTo(birthdayMonth);
}
}
var birthdayDay = $(daySelector);
if (birthdayDay.length == 0) {
throw "can not find 'day' select control";
}
for (var d = 1; d <= 31; d++) {
if (d == config.day) {
$('<option value="' + d + '" selected="selected">' + d + '</option>').appendTo(birthdayDay);
} else {
$('<option value="' + d + '">' + d + '</option>').appendTo(birthdayDay);
}
}
birthdayYear.change(onBirthdayChanged);
birthdayMonth.change(onBirthdayChanged);
birthdayDay.change(onBirthdayChanged);
var day29 = birthdayDay.find('option[value="29"]');
var day30 = birthdayDay.find('option[value="30"]');
var day31 = birthdayDay.find('option[value="31"]');
function onBirthdayChanged() {
var year = parseInt(birthdayYear.val());
var month = parseInt(birthdayMonth.val());
var day = parseInt(birthdayDay.val());
switch (month) {
case 4:
case 6:
case 9:
case 11:
if (day > 30) {
birthdayDay.val(30);
}
day29.show();
day30.show();
day31.hide();
break;
case 2:
if (!isLeapYear(year)) {
if (day > 28) {
birthdayDay.val(28);
}
day29.hide();
} else {
if (day > 29) {
birthdayDay.val(29);
}
day29.show();
}
day30.hide();
day31.hide();
break;
default:
day29.show();
day30.show();
day31.show();
break;
}
}
function isLeapYear(year) {
return 0 == year % 4 && (year % 100 != 0 || year % 400 == 0);
}
}
JavaScript代碼是創建3個選擇標記來選擇日,月,年,以便它們遵循自然規則(2月的28天,leap年...)
如果我創建這樣的表單類型( UserRegisterType.php
)
<?php
namespace HearWeGo\HearWeGoBundle\Form;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
class UserRegisterType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('email', 'text')
->add('firstName', 'text')
->add('lastName', 'text')
->add('dateOfBirth', 'date', array(
'years' => range(date('Y') -100, date('Y')-5)
))
->add('phone', 'text')
->add('password', 'password')
;
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults(array(
'data_class' => 'HearWeGo\\HearWeGoBundle\\Entity\\User'
));
}
public function getName()
{
return 'user_register_type';
}
}
僅創建一個字段- date
類型的dateOfBirth
,它不遵循我想要的自然規則。 如何為我的上述前端和JavaScript代碼注入日期選擇器?
一個非常簡單的解決方案是創建自己的formtype元素,例如,可以將其稱為datepicker。
// YourBundle/Resources/views/Form/fields.html.twig
{% block datepicker_widget %}
<input type="date" {% if value is not empty %}value="{{ value }}" {% endif %} {{ block('widget_attributes') }}/>
{% endblock %}
然后在樹枝的頂部調用此文件
// Top of yourTwigFile.html.twig
{% form_theme form 'YourAppYourBundle:Form:fields.html.twig' %}
最后一步是更改所用元素的類型
// HearWeGo/HearWeGoBundle/Form/UserRegisterType.php
[...]
->add('dateOfBirth', 'datepicker', array(
'years' => range(date('Y') -100, date('Y')-5)
))
[...]
這樣,您將完全不需要任何復雜的Javascript,只需使用Web瀏覽器的默認呈現行為即可(使用<input type="date" />
)。
如果您使用的是Twitter Bootstrap,則可以使用此樹枝模板代替我給的第一個模板,以獲得更漂亮的渲染
{# DATEPICKER #}
{% block datepicker_widget %}
<input placeholder="Date" class="form-control datepicker" type="text" {% if value is not empty %}value="{{ value }}" {% endif %} {{ block('widget_attributes') }}/>
{% endblock %}
{# DATETIMEPICKER #}
{% block datetimepicker_widget %}
{{ form_errors(form.date) }}
{{ form_errors(form.time) }}
<div class="input-group datetimepicker">
<span class="input-group-addon">Le</span>
{{ form_widget(form.date) }}
<span class="input-group-addon inner-addon">à</span>
{{ form_widget(form.time) }}
</div>
{% endblock %}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.