JavaScript json in IE6/IE7 prompts for missing identifiers, strings, or numeric problem handling

The code is as follows:

var obj = {
        'name': 'qqyumidi', 
        'gender': 'male'  //此处不能加上,  ！！
    }
alert(obj.name);

Let's take a look at the property sheets of the Datepicker plug-in:

An instance of the use of the first calendar plug-in

Start by importing the required class library files:

<!-- 引入相应的jquery的UI文件 -->
       <script type="text/javascript"  src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></script>
       <!-- 引入此js文件将日历中内容转化成中文 -->
       <script type="text/javascript"  src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></script>
       <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></script>
       <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/ui-lightness/jquery-ui-1.8.18.custom.css">

Start by writing page code:

<div class="demo">     
    <p>Date:<input type="text" id="datepicker"></p>   
</div>  

The plug-in is then called using js code:

<script type="text/javascript">    
    $(function() {    
    //插件的调用    
    $("#datepicker").datepicker({    
    //在这里进行插件的属性设置   
    });   
   });   
</script> 

Effect screenshots:

Here are some common properties validated by an instance:
1, altField: Using an alternate output field, the date to be selected is output to another control in a different format, with the value selector, which is the control to be output
altFormat: The format of the altField output
Instance validation:
Page code:

<div class="demo">    
   <p>Date: <input type="text" id="datepicker">     
   <input type="text" id="alternate" size="30"/></p>    
</div> 

Js code:

$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});

Effect screenshots:

2, showAnim: set the date panel to display or hide the animation name
Writing js code:

$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});

3, showButtonPanel: whether to display the button panel
Js code:

[javascript] view plaincopyprint?
$( "#datepicker" ).datepicker({
showButtonPanel:true
});

As you can see, there are two buttons under the panel: clicking "Today" will jump to today's date, and clicking "Close" will close the panel.

4, dateFormat: specify the format of the display date
Js code:

$( "#datepicker" ).datepicker({
dateFormat:"yy/mm/dd"
});

Effect screenshots:

As can be seen from the image, the date format in the text box has been changed from the previous "yy-mm-dd" to "by/mm/dd". Of course, there are other formats that can be set according to your preferences.
5, changeMonth: Whether to use the pull-down list to select the month
changeYear: Whether to use the pull-down list to select the year
Add this property to the js code: changeMonth:true or changeYear:true
Where the month or year of the title bar appears in the form of a drop-down menu:

6, yearRange: Set the range of years shown in the down-list box, which can be relative to this year (-nn:-nn) or relative to the selected year (c-nn:c-nn) or absolute year (nnnn:nnnn)
Add properties to the js code:

$( "#datepicker" ).datepicker({
changeYear: true,
yearRange:"2011:2012"
});

Effect screenshots:

As you can see from the figure, the position of the year is in the form of a drop-down menu, where the drop-down menu only appears with options for 2011 and 2012.
Note: YearRange properties are only used if changeYear is true.

7, numberOfMonths: Set up to show for a few months at a time. You can be an array of two numbers, representing the number of rows and columns displayed
Js code:

$( "#datepicker" ).datepicker({
numberOfMonths: 3
});

The numberOfMonths is specified above as 3, and the pop-up calendar panel will show the current and next two months, as shown:

8, showOn: Set the event name that triggered the selector
buttonText: Specify the text that appears on the trigger button, and the showOn property should be set to button or both
buttonImage: Specifies the URL of the pop-up button image, and if set, buttonText becomes the alt value
ButtonImageOnly: Whether to put the image behind the control as a trigger, if set to true then the button will only have the picture as the button, which is more beautiful for the page
Here I write three text boxes to compare the above properties:
1) Js code:

$( "#datepicker2" ).datepicker({
showOn: "both",
buttonText:"日历按钮"
});

Effect screenshots:

2) Set the button to a picture:
Js code:

$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});

By contrast above, you can understand the role of button ImageOnly properties.

9, minDate: the minimum date that can be selected, null means unlimited
maxDate: The maximum date you can select. null means unlimited
Both are based on the date of the day.
Js code:

$(function() {
$( "#datepicker" ).datepicker({
//表示以当天为准，只有在20天之前和10天之后的日期之间的时间可以选择
minDate: -20,
maxDate: "+10D"
});
});

The following image is not available until the 7th (current date is 27):