ReWriteDateControll

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <style type="text/css">

        #Header /*标题样式*/ {

            height: 21px;

            font-family: "宋体";

            font-size: 12px;

        }

        #LDay td /*星期的单元格样式*/ {

            width: 30px;

            height: 30px;

            text-align: center;

            font-family: "宋体";

            font-size: 12px;

        }

        #LBody td /*日期的单元格样式*/ {

            width: 30px;

            height: 30px;

            text-align: center;

            font-family: "宋体";

            font-size: 12px;

            color: #999;

            font-weight: bold;

        }

    </style>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>

    <script type="text/javascript">

        var today = new Date();

        var year = today.getFullYear();      //本年

        var month = today.getMonth() + 1;    //本月

        var day = today.getDate();

        $(function () {

            calendar('')

        })

            //实现日历

            function calendar(o) {

                if (o == 'subtract')

                {

                    month = month - 1;

                    if (month < 1)

                    {

                        month = 12

                        year=year - 1;

                    }

                }

                if (o == 'add') {

                    month = month + 1;

                    if (month > 12)

                    {

                        month = 1;

                        year = year + 1;

                    }

                }

                //本日

                $("#showDate").html(year+'-'+month+'-'+day);

                //本月第一天是星期几（距星期日离开的天数）

                var startDay = new Date(year, month - 1, 1).getDay();

                //本月有多少天(即最后一天的getDate()，但是最后一天不知道，我们可以用“上个月的0来表示本月的最后一天”)

                var nDays = new Date(year, month, 0).getDate();

                //开始画日历

                var numRow = 0;  //记录行的个数，到达7的时候创建tr

                var i;        //日期

                var html = '';

                html += '<table id="Body" width="212"><tbody>';

                //第一行

                html += '<tr>';

                for (i = 0; i < startDay; i++) {

                    html += '<td></td>';

                    numRow++;

                }

                for (var j = 1; j <= nDays; j++) {

                    //如果是今天则显示红色

                    if (j == day) {

                        html += '<td style="color:red" onclick="' + "alert('今天是" + j + "号');" + '">';

                        html += '<input type="checkbox">' + j;    //开始加日期

                    }

                    else {

                        html += '<td onclick="' + "alert('你点的是" + j + "号');" + '">';

                        html += '<input type="checkbox">'+j;    //开始加日期

                    }

                    html += '</td>';

                    numRow++;

                    if (numRow == 7) {  //如果已经到一行（一周）了，重新创建tr

                        numRow = 0;

                        html += '</tr><tr>';

                    }

                }

                html += '</tbody></table>';

                document.getElementById("Container").innerHTML = html;

            }

            function addMonth()

            {

                calendar('add');

            }

            function SubtractMonth()

            {

                calendar('subtract');

            }

    </script>

</head>

<body>

    <table id="Calendar" width="212">

        <tr>

            <td height="21" bgcolor="#78b3ed" width="212">

                <table id="LHeader" height="21" width="212">

                    <tbody>

                        <tr align="center">

                            <td align="center" onclick="addMonth('subtract')" width="21">&lt;</td>

                            <td align="center">

                                <span id="showDate">2010.01</span>

                            </td>

                            <td align="center" onclick="SubtractMonth('add')" width="21">&gt;</td>

                        </tr>

                    </tbody>

                </table>

            </td>

        </tr>

        <tr>

            <td height="18">

                <table id="LDay" bgcolor="#e7f1fd">

                    <tbody>

                        <tr>

                            <td>日</td>

                            <td>一</td>

                            <td>二</td>

                            <td>三</td>

                            <td>四</td>

                            <td>五</td>

                            <td>六</td>

                        </tr>

                    </tbody>

                </table>

            </td>

        </tr>

        <tr>

            <td height="120" width="212" id="Container"></td>

        </tr>

    </table>

</body>

</html>

//--------------------------------------------------------------------------第二版带价格------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#Header /*标题样式*/ {
height: 21px;
font-family: "宋体";
font-size: 12px;
}

#LDay td /*星期的单元格样式*/ {
width: 50px;
height: 30px;
text-align: center;
font-family: "宋体";
font-size: 12px;
}

#LBody td /*日期的单元格样式*/ {
width: 30px;
height: 30px;
text-align: center;
font-family: "宋体";
font-size: 12px;
color: #999;
font-weight: bold;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>

if (o == 'subtract')
{
month = month - 1;
if (month < 1)
{
month = 12
year=year - 1;
}

}
if (o == 'add') {
month = month + 1;
if (month > 12)
{
month = 1;
year = year + 1;
}
}
//本日
$("#showDate").html(year+'-'+month+'-'+day);
//本月第一天是星期几
var startDay = new Date(year, month - 1, 1).getDay();

//本月有多少天
var nDays = new Date(year, month, 0).getDate();

//开始画日历
var numRow = 0; //记录行的个数，到达7的时候创建tr
var i; //日期
var html = '';
html += '<table id="Body" width="350"><tbody>';
//第一行
html += '<tr>';
for (i = 0; i < startDay; i++) {
html += '<td></td>';
numRow++;
}
for (var j = 1; j <= nDays; j++) {
//如果是今天则显示红色
if (j == day) {
html += '<td style="color:red" onclick="' + "alert('今天是" + j + "号');" + '">';
html += parseInt(Math.random() * 5, 10) + '元<input type="checkbox"/>' + j; //开始加日期
}
else {
html += '<td onclick="' + "alert('" + j + "号');" + '">';
html += parseInt(Math.random() * 5, 10) + '元<input type="checkbox"/>' + j; //开始加日期
}
html += '</td>';
numRow++;
if (numRow == 7) {
numRow = 0;
html += '</tr><tr>';
}
}

html += '</tbody></table>';
document.getElementById("Container").innerHTML = html;
}
function addMonth()
{
calendar('add');
}
function SubtractMonth()
{
calendar('subtract');
}
</script>
</head>

----------------------------------------完善版------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#Header {
height: 21px;
font-family: "宋体";
font-size: 12px;
}

#LDay td {
width: 80px;
height: 30px;
text-align: center;
font-family: "宋体";
font-size: 12px;
}

#LBody td {
width: 30px;
height: 30px;
text-align: center;
font-family: "宋体";
font-size: 12px;
color: #999;
font-weight: bold;
}
#Body tr td {
width:80px;
align-content:center;
text-align: center
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>

function calendar(o,priceList) {

if (o == 'subtract') {
month = month - 1;
if (month < 1) {
month = 12
year = year - 1;
}

}
if (o == 'add') {
month = month + 1;
if (month > 12) {
month = 1;
year = year + 1;
}
}

$("#showDate").html(year + '/' + month + '/' + day);

var startDay = new Date(year, month - 1, 1).getDay();

var nDays = new Date(year, month, 0).getDate();

var numRow = 0;
var i;
var html = '';
html += '<table id="Body" width="560"><tbody>';

html += '<tr>';
for (i = 0; i < startDay; i++) {
html += '<td></td>';
numRow++;
}
for (var j = 1; j <= nDays; j++) {
// $(priceList).each(function (index, objPrice) {
// if (objPrice.)
var tempObj;
var tempDate=year + '/' + month + '/' + j;
$(PriceList[0].DayPriceList).each(function (index, objPrice) {
if (objPrice.Date == tempDate)
{
tempObj = objPrice
}
})
if (j == day) {
html += '<td style="color:red">';
html += '￥' +(tempObj==undefined?'0':tempObj.Price) + '</br>￥' + (tempObj==undefined?'0':tempObj.SellPrice) + '</br><input type="checkbox"/>' + '<lable>' + j + '</lable>';
}
else {
html += '<td>';
html += '￥' + (tempObj==undefined?'0':tempObj.Price) + '</br>￥' + (tempObj==undefined?'0':tempObj.SellPrice)
+ '</br><input type="checkbox"/>' + '<lable>' + j + '</lable>';
}

// });

html += '</td>';
numRow++;
if (numRow == 7) {
numRow = 0;
html += '</tr><tr>';
}
}

html += '</tbody></table>';
document.getElementById("Container").innerHTML = html;
}
function cutDate(dateTime)
{

}
function addMonth() {
calendar('add');
$("input[type=checkbox]").prop("checked", false)
}
function SubtractMonth() {
calendar('subtract');
$("input[type=checkbox]").prop("checked", false)
}
Array.prototype.indexOf = function (el) {
for (var i = 0, n = this.length; i < n; i++) {
if (this[i] === el) {
return i;
}
}
return -1;
}
$(function () {
$("#checkAll").click(function () {
if ($("#checkAll").prop("checked") == true) {
$("input[type=checkbox]").prop("checked", true);
}
else {
$("input[type=checkbox]").prop("checked", false)
}

})

$("input[name='week']").click(function () {

$(this).parent().prevAll().length

checkWeedDay($(this).parent().prevAll().length, $(this).prop("checked"))

});
})
function checkWeedDay(weekIndex, checked) {
$("#Body").children().find("tr").each(function (indextr, objtr) {
$(objtr).children().eq(weekIndex).find("input[type='checkbox']").prop("checked", checked)
});
}
function GetSelectedDate() {
var dataArray = new Array();
var MainDate = $("#showDate").html().substring(0, 6);
$("#Body").children().find("input[type='checkbox']").each(function () {
if ($(this).prop('checked')) {
var tempStr = $(this).next().html();
var selectedDate = (tempStr.length > 1) ? tempStr : '0' + tempStr;
var fullDate = MainDate + '/' + selectedDate;

dataArray.push(fullDate);
}
})
return (JSON.stringify(dataArray));
}
</script>
</head>

<body>
<table id="Calendar" width="560">
<tr>
<td height="21" bgcolor="#78b3ed" width="560">
<table id="LHeader" height="21" width="560">
<tbody>
<tr align="center">
<td align="center" onclick="SubtractMonth('add')" width="21"><</td>
<td align="center">
<span id="showDate">fullDate</span>
<input type="checkbox" id="checkAll" />全选
</td>
<td align="center" onclick="addMonth('subtract')" width="21">></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="18">
<table id="LDay" bgcolor="#e7f1fd">
<tbody>
<tr>
<td>日<input name="week" type="checkbox" /></td>
<td>一<input name="week" type="checkbox" /></td>
<td>二<input name="week" type="checkbox" /></td>
<td>三<input name="week" type="checkbox" /></td>
<td>四<input name="week" type="checkbox" /></td>
<td>五<input name="week" type="checkbox" /></td>
<td>六<input name="week" type="checkbox" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="120" width="560" id="Container"></td>
</tr>
</table>
<input type="button" value="获取选中日期" onclick="GetSelectedDate()" />
</body>
</html>

ReWriteDateControll的更多相关文章

随机推荐

grails 优缺点分析
Grails是一套用于快速Web应用开发的开源框架,它基于Groovy编程语言,并构建于Spring.Hibernate等开源框架之上,是一个高生产力一站式框架. 易于使用的基于Hibernate的对 ...
java 方法
方法命名规范要求类的命名规范:“全部单词的首字母必须大写”.那么在定义方法的时候也是有命名规范要求的:“第一个单词的首字母小写,之后每个单词的首字母大写”,那么这就是方法的命名规范. 递归调用 ...
linux下从SVN checkout目录源码下来
需求:我们替换http请求为https协议,要查看全不全,得到源码中去检查,所以自动化扫源码查询.但是得先有源码包啊.源码包直接从SVN上checkout 1.下载 [root@v50 0.02 sr ...
1. Django系列之Django与ajax上传文件
html代码如下: <div class="form-group"> <label for="exampleInputFile">附件上 ...
python学习笔记（一）
• Python能干嘛?[1]科学计算[2]图形化开发[3]系统脚本[4]Web服务器[5]网络爬虫[6]服务器集群自动化运维 • 常用工具:easy_install.pip.ipython.Subl ...
UML大战需求分析--阅读笔记3
这次阅读的是第四章,流程分析利器之 – 活动图.对需求有两种分析的方式:结构建模与行为建模.活动图是行为建模中经常使用的一种图.由流程图发展而来. 活动图中有一些名词:开始状态.结束状态.活动.判断. ...
自用论文排版组合 = LyX2.2.2 + TeXLive2016
注意的地方: 1.要支持中文的话选CTEX类,其他地方默认即可: 2.文档分"导言区"和"文档区",一般的编辑直接使用LyX的工具,额外的宏包在导言区添加,具体 ...
centos 7.0 firewall 防火墙常用命令
1.查看防火墙是否在运行 firewall-cmd --state [root@localhost ~]# firewall-cmd --staterunning 2.查看都有哪些端口添加到例外 f ...
更换域名后的数据库sql的执行命令
原来域名为trz.lqzcw.com 更改成 www.trzbearing.com UPDATE wp_options SET option_value = replace(option_value, ...
6. web前端开发分享-css,js移动篇
随着移动市场的逐步扩大及相关技术的日趋完善,对前端开发提出了新的岗位要求,在继承前人成果的基础上需要在新的历史条件下有新的创新.移动端的开发,虽然没有IE6众多问题的折磨,但是多平台,多设备的兼容,也 ...

ReWriteDateControll

ReWriteDateControll的更多相关文章

随机推荐

热门专题