jQuery日期选择器中的自定义文本
Custom Text in jQuery Datepicker
使用jQuery从日期选择器中提取后,我必须在输入框中显示日期。我使用了以下代码:
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM' });
$.datepicker.formatDate('yy-mm-dd');
});
我可以用这种格式得到日期:"8月9日星期五"。然而,我的要求是:8月9日星期五(今天)
下面是一个需要处理的JS Fiddle:http://jsfiddle.net/4cgPe/
你知道我怎么能做到这一点吗?
我找不到太多关于向jQuery添加自定义文本的内容,所以我想出了自己的JavaScript。我建立在你的DatePicker代码之上。
(我的理解是,如果选择的日期是今天,那么添加"(今天)",或者,如果选择日期是明天,则添加"(明天)",否则,不为其他日期添加任何内容。
<html><head><link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM yy' });
$.datepicker.formatDate('yy-mm-dd');
});
function updateDate(){
var inputDate=document.getElementById('datepicker').value;
var selectedDate=new Date(inputDate);
var today=new Date();
var tomorrow=new Date();
tomorrow.setDate(today.getDate()+1);
selectedDate.setHours(0,0,0,0);
today.setHours(0,0,0,0);
tomorrow.setHours(0,0,0,0);
var DaysFull=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var DaysShort=["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
var MonthsFull=["January","February","March","April","May","June","July","August","September","October","November","December","January"];
var MonthsShort=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan"];
var finalDate=DaysShort[selectedDate.getDay()]+" "+selectedDate.getDate()+" "+MonthsFull[selectedDate.getMonth()];
if(selectedDate.getTime() == today.getTime()){
document.getElementById('datepicker').value=finalDate+" (Today)";
}
else if(selectedDate.getTime() == tomorrow.getTime()){document.getElementById('datepicker').value=finalDate+" (Tomorrow)";}
else {document.getElementById('datepicker').value=finalDate;}
}
</script>
</head>
<body>
<form><input type="text" id="datepicker" onchange="javascript:updateDate()" /></form>
</body></html>
编辑:
附加功能:可能需要使用"全天/月"名称或"短天/月",因此您可以相应地使用阵列。
全天:周日、周一等
DaysHalf:周日、周一等
MonthsFull:一月、二月等
半月:一月、二月等
希望这能有所帮助。如果这还不够,请告诉我。:)
不同类型格式的完整源代码如下:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30" /></p>
<p>Format options:<br />
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
</body>
</html>
有关格式的更多信息,请参阅此链接
相关文章:
- 防止自定义文本出现在页面上的所有高图表上,←使用 {events:{load:function(){var.
- Highcharts自定义文本从右向左导出
- 谷歌可视化树图-如何创建自定义文本
- 动态自定义文本堆栈标签Highcharts
- 无法编辑Ext图表中的自定义文本项
- 使用喜欢按钮在Facebook上传输自定义文本
- 如何在 sugarcrm 中的自定义下拉字段中更改值时填充自定义文本区域
- 使用 JS 或 jQuery 解析自定义文本标记
- 需要有关自定义文本区域最大长度功能的建议
- 在 JS 中随机生成带有 url 的自定义文本
- 我每隔几个小时使用 JavaScript 的自定义文本不起作用
- 使用Shopify代码操作自定义文本框时出现问题
- 使用javascript和jquery向inpt字段添加自定义文本
- 使用fabric.js和HTML5在图像画布上编写自定义文本
- 所有id以自定义文本开头的按钮上的JQuery单击事件
- Javascript:确认确定取消按钮上的自定义文本
- 在剑道装载指示器上显示自定义文本
- jQuery日期选择器中的自定义文本
- 关注引导浮动模态表单上自定义文本之后的文本区域
- 在任务栏浏览器选项卡上显示自定义文本