我试图让
Jquery-UI datepicker每月只有1个可用日期,这是每个月的第1个,当选择所选日期X天时,应该复制到另一个文本输入字段.
弄到目前为止我所拥有的：
http://jsfiddle.net/8y4Bf/
来自小提琴的代码：
HTML
@H_403_11@<div> <label>Select an Option:</label> <select id="select1"> <option value="" disabled="disabled" selected="selected">Select an option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </div> <br /><br /> <div> <label>Start Date:</label> <input type="text" id="startdate" /> <br /><br /> <label>End Date:</label> <input type="text" id="enddate" /> </div>jQuery的
@H_403_11@$('#select1').change(function() { $('#startdate,#enddate').val(""); if ($('#select1').val() == '1') { $('#startdate').datepicker({ showButtonPanel: true,closeText: 'Close',dateFormat: "mm/dd/yy",onSelect: function(selected) { if (this.id == 'startdate') { // Parameters 1 day only & also copy result into enddate + 5 days } } }); } else if ($('#select1').val() == '2') { $('#startdate').datepicker({ showButtonPanel: true,onSelect: function(selected) { if (this.id == 'startdate') { // Parameters 1 day only & also copy result into enddate + 7 days } } }); } });我已经在http://jqueryui.com/datepicker/#min-max阅读了文档,但无法弄清楚如何才能使每个月的第1天可用.
我是否必须再次获取#startdate的值,添加日期然后将其粘贴到#enddate中或将该值保存在某处以便我可以从那里开始？
解决方法
经过测试和工作！
>我改变了你的jsfiddle的逻辑.
>只是要知道,为了实现您的需要,datepicker必须实现beforeShowDay函数来覆盖将在组件中显示的日期,然后必须将所选日期转换为Date对象类型以轻松添加5或7天(以正确的方式行事,例如,如果你想选择每个月的最后一天,可以是30或31加5或7天,如果你手动完成,你将获得36或38而不是其他月份还有许多其他可能性 – 但这不是你的情况,我只是在解释).
>我也改进了代码,看看：
现场演示：http://jsfiddle.net/oscarj24/q27EG/2/
jQuery代码：
@H_403_11@$(function() { var extraDays = 0; var comboBox = $('#select1'); var txtStartDate = $('#startdate'); var txtEndDate = $('#enddate'); var inputs = txtStartDate.add(txtEndDate); comboBox.on('change',function() { inputs.val(''); var val = $(this).val(); if(val == 1) extraDays = 5; if(val == 2) extraDays = 7; txtStartDate.datepicker({ showButtonPanel: true,dateFormat: 'mm/dd/yy',beforeShowDay: function(date) { /* Check for the first day */ if (date.getDate() == 1) { return [true,'']; } else { return [false,'','Unavailable']; } },onSelect: function(selected) { /* Add extra days to the date according to 'comboBox' selection */ var endDate = new Date(selected); endDate.setDate(endDate.getDate() + extraDays); var m = pad(endDate.getMonth() + 1,2); var d = pad(endDate.getDate(),2); var y = endDate.getFullYear(); var endDateStr = [m,d,y].join('/'); txtEndDate.val(endDateStr); } }); }); }); /* This function just adds a zero to get this format: "01,02,etc" in a number less than 10 */ function pad(number,length) { var str = '' + number; while (str.length < length) { str = '0' + str; } return str; };