1、问题背景
日期类型：按日、按月、按年和按时间，切换到不同的类型，日历控件显示不同的日期
2、实现源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my97datepicker切换日期类型</title>
<script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>
<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
<script>
$(document).ready(function(){
$("#selectDate").change(function(){
var date = $(this).val();
if(date=="0")
{
$("#date").empty().html('<input type="text" id="day" name="day" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M-%d\',dateFmt:\'yyyy-MM-dd\',alwaysUseStartDate:true})"/>');
}
else if(date=="1")
{
$("#date").empty().html('<input type="text" id="month" name="month" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M\',dateFmt:\'yyyy-MM\',alwaysUseStartDate:true})"/>');
}
else if(date=="2")
{
$("#date").empty().html('<input type="text" id="year" name="year" class="Wdate" onClick="WdatePicker({startDate:\'%y\',dateFmt:\'yyyy\',alwaysUseStartDate:true})"/>');
}
else if(date=="3")
{
$("#date").empty().html('<input type="text" id="startTime" name="startTime" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M-01 00:00:00\',dateFmt:\'yyyy-MM-dd HH:mm:ss\',alwaysUseStartDate:true})"/>至<input type="text" id="endTime" name="endTime" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M-%d 23:59:59\',dateFmt:\'yyyy-MM-dd HH:mm:ss\',alwaysUseStartDate:true})"/>');
}
});
});
</script>
</head>
<body>
<div>
<select id="selectDate" style="width: 200px;">
<option value="0">按日</option>
<option value="1">按月</option>
<option value="2">按年</option>
<option value="3">按时间</option>
</select>
</div>
<br>
<div id="date">
<input type="text" id="day" name="day" class="Wdate" onClick="WdatePicker({startDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true})"/>
</div>
</body>
</html>
3、实现结果
（1）按日切换
![]()
（2）按月切换
![]()
（3）按年切换
![]()
（4）按时间切换
![]()
分享到：
相关推荐
My97DatePicker是一款广泛应用于前端开发中的日期选择插件，主要特点是其简洁的用户界面和强大的功能特性。这款插件由国内开发者设计，为网页表单中的日期输入提供了方便、高效的解决方案，尤其适用于需要日期验证的...
My97DatePicker是一款广泛使用的JavaScript日期选择器控件，它为网页中的日期输入提供了便捷的交互体验。这个控件以其高效、易用和高度可定制性而受到开发者的青睐。在网页开发中，日期选择器通常用于用户输入日期时...
My97DatePicker是一款广泛应用于Web开发中的JavaScript日期选择控件，尤其在中文环境下非常流行。它的版本号4.7.2表明这是一个经过多次迭代优化的成熟产品，旨在为用户提供便捷、美观的日期输入体验。这款控件以其...
4. **语言支持**：默认情况下，My97 DatePicker使用中文显示，但可以通过设置`lang`属性切换其他语言，如英文（'en'）。 5. **自定义样式**：控件的外观可以通过修改CSS文件进行定制，以匹配网站的整体设计风格。 ...
2. 国际化：My97DatePicker支持多语言，可以根据用户所在地自动切换日期和时间的显示格式。 3. 自定义插件：通过编写插件，可以扩展My97DatePicker的功能，如添加日期范围选择、时间间隔选择等。 综上所述，My97...
总的来说，My97 DatePicker凭借其强大的功能、良好的兼容性、丰富的定制选项以及易于集成的特点，成为了前端开发中常用的日期选择插件。无论你是新手还是经验丰富的开发者，都可以轻松上手并利用它提升项目的时间...
- **多语言支持**：My97DatePicker4.0内置了多种语言，适应全球化的需求，可以轻松切换不同的语言环境。 - **自定义样式**：开发者可以根据项目需求定制日历的样式，包括颜色、字体、布局等，使其与网站整体风格...
4. 功能强大：My97DatePicker支持日期范围限制、日期验证、日期计算（如加减日期）、日期时间的相对表达式（如“今天”、“明天”）等功能。 5. 兼容性好：该控件兼容主流的Web浏览器，包括IE6及以上版本、Firefox...
插件支持多种日期格式，如yyyy-MM-dd、yyyy/MM/dd等，并且能够根据用户的操作习惯自动切换日期和时间的输入方式。 2. 使用方法： 在网页中使用My97DatePicker非常简单。首先，你需要在HTML文件中引入My97...
开发者可以轻松地切换日期显示的语言，适应不同地区的用户。 4. **服务器端集成**：尽管主要在客户端运行，但My97DatePicker可以与ASP.NET服务器端代码完美配合。它可以将用户选定的日期值自动传递到服务器，便于...
My97DatePicker是一款非常流行的JavaScript日期选择器插件，它为网页开发人员提供了一种方便、灵活的方式来处理日期输入。这个RAR压缩包包含了My97DatePicker的所有相关文件，包括JavaScript库、CSS样式表以及可能的...
My97Datepicker是一款广泛使用的JavaScript日历控件，它为网页开发提供了强大的日期选择功能。这款控件以其丰富的自定义选项、良好的兼容性和高效性能而受到开发者喜爱。在Java开发环境中，My97Datepicker通常与前端...
【日历控件my97datepicker】是一种广泛应用于网页开发中的JavaScript组件，它为用户提供了一个交互性强、功能丰富的日期选择工具。My97DatePicker由My97 Design开发，以其高效、易用和高度可定制性著称，尤其适用于...
《My97DatePicker详解——一款强大的JavaScript日期选择插件》 在网页开发中，日期选择器是一个非常常见的组件，它能够方便用户输入日期，提高用户体验。My97DatePicker是一款广泛使用的JavaScript日期选择插件，其...
5. **多语言支持**：为了满足全球化的应用需求，My97DatePicker支持多种语言，包括中文、英文等，可以轻松切换，适应不同地区的用户。 6. **自定义皮肤**：控件允许开发者自定义皮肤，这意味着你可以根据网站的风格...
My97DatePicker是一款在中国乃至全球华人开发者中广受欢迎的日期选择插件，它以其丰富的功能、易用性和高度自定义性赢得了程序员们的喜爱。这款插件最初由一位名为"My97"的开发者创建，因此得名My97 DatePicker。...
在提供的`demo.htm`文件中，我们可以看到My97DatePicker的各种使用示例，包括基本的日期选择、日期范围限制、多语言切换等功能。通过查看和修改这个示例，开发者可以更好地理解和掌握如何在自己的项目中使用My97...