Fatal编程技术网
  • javascript/
  • Javascript 按钮增加文本框中的日期

Javascript 按钮增加文本框中的日期

javascript jquery jquery-ui

Javascript 按钮增加文本框中的日期,javascript,jquery,jquery-ui,jquery-ui-datepicker,Javascript,Jquery,Jquery Ui,Jquery Ui Datepicker,我正在写下面的代码 <!doctype html> <html><head> <meta charset="utf-8" /> <title>jQuery UI Datepicker - Icon trigger</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-u

我正在写下面的代码

<!doctype html> 
<html><head>
  <meta charset="utf-8" /> 
  <title>jQuery UI Datepicker - Icon trigger</title>
  <link rel="stylesheet" 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>
$(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;}
}

function addDaysToDate() {
var date1= document.getElementById('datepicker').value;
var date = new Date( Date.parse( date1 ) ); 
date.setDate( date.getDate() + 1 );
alert(date);
document.getElementById('datepicker').value=date;
}

</script>
</head>
<body>
<form><input type="text" id="datepicker" onchange="javascript:updateDate()" style="width:160px" />
<button onclick="addDaysToDate()">add</button></form>
</body></html>


jQuery UI日期选择器-图标触发器
$（函数（）{
$（“#日期选择器”）。日期选择器({
minDate:-0，
maxDate:“+1M+2D”，
展示：“按钮”，
buttonImage:“calendar.png”，
buttonImageOnly:正确，
日期格式：'D dd MM yy'}）；
$.datepicker.formatDate（'yy-mm-dd'）；
});
函数updateDate（）{
var inputDate=document.getElementById（'datepicker'）。值；
var selectedDate=新日期（inputDate）；
var today=新日期（）；
var明天=新日期（）；
明天.setDate（今天.getDate（）+1）；
选择日期设置小时数（0,0,0,0）；
今天，设定时间（0,0,0,0）；
明天。设定时间（0,0,0,0）；
var DaysFull=[“周日”、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”、“周日”]；
var DaysShort=[“太阳”、“星期一”、“星期二”、“星期三”、“星期四”、“星期五”、“星期六”、“太阳”]；
var MonthsFull=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”、“一月”]；
var Monthshort=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”、“一月]；
var finalDate=DaysShort[selectedDate.getDay（）]+“”+selectedDate.getDate（）+“”+monthFull[selectedDate.getMonth（）]；
如果（selectedDate.getTime（）==today.getTime（））{
document.getElementById（'datepicker'）。value=finalDate+“（今天）”；
}
else if（selectedDate.getTime（）==明天.getTime（））{document.getElementById（'datepicker'）。value=finalDate+“（明天）”；}
else{document.getElementById（'datepicker'）。value=finalDate；}
}
函数addDaysToDate（）{
var date1=document.getElementById（'datepicker'）。值；
var date=新日期（date.parse（date1））；
date.setDate（date.getDate（）+1）；
警报（日期）；
document.getElementById（'datepicker'）。值=日期；
}
添加
我点击了一个按钮，在接下来的32天内，文本框中的哪个日期应该增加1，并且不超过1，但是上面的代码增加了日期，并且值从文本框中消失，而不是显示…

您正在设置一个日期字段来设置其他文本，因此，文本框中的日期不是有效的日期对象，并中断插件

您正在使用datepicker插件，因此可以使用
getDate
和
setDate
方法获取/设置作为日期对象的值

医生：和

我使用附加字段更改了您的代码，以显示日期是今天还是明天：

$(function () {
    $("#datepicker").datepicker({
        minDate: -0,
        maxDate: "+1M +2D",
        showOn: "button",
        buttonImage: "calendar.png",
        buttonImageOnly: true,
        dateFormat: 'D dd MM yy'
    });
    $("#datepicker").change(function () {
        updateDate();
    });
    $("#addDate").click(function () {
        addDaysToDate();
    });
});

function updateDate() {
    var today = new Date();
    var tomorrow = new Date();
    tomorrow.setDate(today.getDate() + 1);
    var date2 = $('#datepicker').datepicker('getDate');

    date2.setHours(0,0,0,0);
    today.setHours(0,0,0,0);
    tomorrow.setHours(0,0,0,0);

    if (date2.getTime() == today.getTime()) {
        $('#todtom').text(" (Today)");
    } else if (date2.getTime() == tomorrow.getTime()) {
        $('#todtom').text(" (Tomorrow)");
    } else {
        $('#todtom').text("");
    }
}

function addDaysToDate() {
    var date2 = $('#datepicker').datepicker('getDate');
    date2.setDate(date2.getDate() + 1);
    $('#datepicker').datepicker('setDate', date2);
    $('#datepicker').change();
}
我将代码更改为使用完整的jQuery代码，而不是将jQuery和JS混合用于DOM操作

演示：

感谢Edward的关注。。。为哪个组件分配“todtom”id？是一个简单的标签，我称之为todtom，因为我实际上是在这些“今天”或“明天”的日期后面添加的，比如：2013年8月12日（星期一）。。。。所以我不需要为这个单独的标签…但是这个使用正在破坏datepicker的功能；要正常工作，它必须是一个余晖事件，但尚未实施。唯一简单的工作方法是使用附加标签或其他颜色？一种解决方法是编写document.getElementById（'datepicker'）。value=document.getElementById（'datepicker'）。value+“（今天）”；美元（“#日期选择器”）。文本（“（今天）”。。。不管这有多奇怪，但它正在发挥作用