jQuery日期插件实现弹出选择框Datepicker效果(2)
CSS样式自定义： 首先，我们需要给日期弹窗的表现样式进行美化，以便能更好的融入到我们的实际运用中。jQuery本身提供给我们针对 Datepicker的很多CSS日历
CSS样式自定义：
首先，我们需要给日期弹窗的表现样式进行美化，以便能更好的融入到我们的实际运用中。jQuery本身提供给我们针对Datepicker的很多CSS日历样式，你可以选择使用其中的样式，当然也可以自行编辑合适的CSS样式文件。
本例中的弹窗框日历样式为jQuery提供的默认皮肤样式之一，日历截图如下：
日期格式自定义：
我们可以在初始化函数.datepicker()中定义各种日期格式，以下为一些常用日期格式：
- //yy表示完整年份：2008。y表示简写年份：08
- //mm表示单月补零：01。m表示简写月份：1
- //dd表示单日补零：09。d表示简写：9
- $('#trip input#leavedate').datepicker({ dateFormat: $.datepicker.W3C }); // 2008-01-31
- $('#trip input#leavedate').datepicker({ dateFormat: 'yy年m月d日' }); // 2008年1月31日
- $('#trip input#leavedate').datepicker({ dateFormat: 'yy/m/d'' }); // 2008/1/31
- $('#trip input#leavedate').datepicker({ dateFormat: 'y/m/d' }); // 08/1/31
- $('#trip input#leavedate').datepicker({ dateFormat: 'yy年m月d日，D' }); //2008年1月31日，星期一
- //代码吾爱www.code52.net
如上例所示，你可以根据自己的需要任意修改日期格式；比如在年月日之间以汉字、斜线、空格、短横杠间隔。
用户在选择日期后，对应的输入框会出现我们定义格式的日期。
表现行为自定义：
最后一个可以自定义的地方是弹出框表现行为。默认情况下，日期选择框会在用户点击输入框时触发弹出（即在输入框的Focus事件发生时触发）。
我们可以很简单的改变这种模式，如演示所示，我们将弹出框的触发绑定在了一个按钮图片上，而没有采用默认的行为模式：
- //showOn值为button表示将日历框绑定在一个按钮（图片）上；
- //buttonImage的值表示图片文件的名称和位置（请注意路径）
- //如果不需要显示按钮而只显示图片，请置buttonImageOnly的值为True。
- $('#trip input#leavedate').datepicker({ showOn: 'button', buttonImage: 'calendar.gif', buttonImageOnly: true });
通过以上对Datepicker进行自定义，我们即成功完成了演示中的那种效果。
精彩图集
精彩文章