[英]Populate date dropdown with datepicker
I have a dropdown list where the user can choose month/day/year, but to make it a bit quicker for the user i have added in the jquery datepicker, which is working ok except is there a way that once the user has selected a date from the calendar that it automatically populates the drop down fields? 我有一个下拉列表,用户可以在其中选择月/日/年,但是为了让用户更快一点,我在jquery datepicker中添加了该列表,它工作正常,但是一旦用户选择了从日历中自动填充下拉字段的日期? As i have these dropdowns set to import into my database already.
由于我已经将这些下拉列表设置为导入到我的数据库中。
Current drop downs 电流下降
<dd>
<select id="month_of_purchase" name="entry[month_of_purchase]">
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="day_of_purchase" name="entry[day_of_purchase]">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="year_of_purchase" name="entry[year_of_purchase]">
<option value="">Year</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</dd>
Current datepicker 当前日期选择器
$(document).ready(function(){
$("#datepicker").datepicker();
});
$(document).ready(function(){
$("#datepicker").datepicker({dateFormat: 'mm-dd-yy',
onSelect: function(dateText, inst) {
var mydate= $(this).datepicker("getDate");
$("#month_of_purchase").val(mydate.getMonth()+1);
$("#day_of_purchase").val(mydate.getDate());
$("#year_of_purchase").val(mydate.getFullYear());
}
});
});
See it working: http://jsfiddle.net/8SYsN/ 看到它正常工作: http : //jsfiddle.net/8SYsN/
try this way 尝试这种方式
JQUERY CODE: JQUERY代码:
$(document).ready(function () {
$("#tx").datepicker({
buttonImage: 'http://icongal.com/gallery/image/203336/birthday_rose_for_kdc_kdc_rose_love_flower_valentine_rose.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both'
});
$("#tx").on('change', function () {
var dt = ($(this).val()).split('/');
var mon = dt[0];
var day = dt[1];
var year = dt[2];
$('#month_of_purchase').val(mon).attr("selected", "selected");
$('#day_of_purchase').val(day).attr("selected", "selected");
$('#year_of_purchase').val(year).attr("selected", "selected");
});
});` });`
HTML CODE: HTML代码:
<input type="hidden" id="tx" />
<select id="month_of_purchase" name="entry[month_of_purchase]">
<option value="">Month</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="day_of_purchase" name="entry[day_of_purchase]">
<option value="">Day</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="year_of_purchase" name="entry[year_of_purchase]">
<option value="">Year</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
LIVE DEMO: http://jsfiddle.net/Un7PG/21/ 实时演示: http : //jsfiddle.net/Un7PG/21/
EDIT 1: 编辑1:
only modification i have done is that, i have converted the date value from 1,2,3...
to 01,02,03......
under value attribute of option tags. 我所做的唯一修改是,我已将选项标签的value属性下的日期值从
1,2,3...
转换为01,02,03......
EDIT 2: 编辑2:
Trigger a date-picker over a image rather than a traditional text box. 在图像而不是传统的文本框上触发日期选择器。
Happy Coding:) 快乐编码:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.