html日期横向拖动选择控件,一个简单横向javascript日期控件

具体要求就是:

1、日期表格横向占满页面。

2、每个月的日期列表横向显示在一排,而不是像网上的很多日期控件显示一个方块。

3、要求只有年月日可选,选择年或月后自动更新对应日期(这个每个日期控件都有的)。

4、默认显示当前年月,高亮当前日期,并显示当前的周次(本年第几周)和星期几。

5、选择某个日期后高亮显示当前日期,并自动更新周次和星期显示。

6、提供接口,可以设定特定日期的显示样式。

6、其他就是一些界面展示的问题了。

想着就是一个日期控件,做着也比较简单,不过比较特别是横向的,第一次听说这种需求的!

偶还是第一次写日历类的东西,不过这次的麻烦还是在于周次的计算上和最后提供的设定特定日期的接口实现上,但经过一番分析也很好的解决了。

主要几个总结:

1、使用了闭包,隐藏内部函数及变量,防止变量污染。最后只提供一个对外接口:setDateStyle

2、计算每年二月的天数不是通过判断闰年的办法,而是通过判断是否2月29日存在,如果不存在则为28天。

3、计算周次要先计算当前日期是本年的第几天,同时要考虑本年1月1日是星期几,然后计算即可得出。

4、setDateStyle支持单个日期样式的传入,也支持多个日期样式的设定。对于样式的更新主要采用数组合并字符窜,并采用字符串的indexOf方法匹配并执行样式的设定。

5、CSS/JS/HTML相分离,便于维护。函数模块化便于重用。

var logDateControl=(function(){

var curSelEl;  //当前选中的日期

var styleData=[],dataStyle={};

//获取指定id的元素

var $=function(id){return document.getElementById(id)}

//计算指定日期是第几周(默认为当前日期),该计算方法比较严密准确

var calWeek=function(dt){

var calDay=dt||new Date();  //当前要计算的时间

var firstDay=new Date(calDay.getFullYear(),0,

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个可以实现横向滑动选择、选中变色的自定义件的代码: ``` public class HorizontalSelectView extends RecyclerView { private SelectAdapter adapter; private OnItemClickListener itemClickListener; public HorizontalSelectView(Context context) { super(context); init(); } public HorizontalSelectView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(); } public HorizontalSelectView(Context context, @Nullable AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } private void init() { LinearLayoutManager layoutManager = new LinearLayoutManager(getContext()); layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); setLayoutManager(layoutManager); adapter = new SelectAdapter(getContext()); setAdapter(adapter); new LinearSnapHelper().attachToRecyclerView(this); } public void setDataList(List<SelectItem> dataList) { adapter.setDataList(dataList); } public void setOnItemClickListener(OnItemClickListener listener) { itemClickListener = listener; } private class SelectAdapter extends RecyclerView.Adapter<SelectViewHolder> { private List<SelectItem> dataList; private Context context; public SelectAdapter(Context context) { this.context = context; dataList = new ArrayList<>(); } public void setDataList(List<SelectItem> dataList) { this.dataList = dataList; notifyDataSetChanged(); } @NonNull @Override public SelectViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(context).inflate(R.layout.item_select, parent, false); return new SelectViewHolder(view); } @Override public void onBindViewHolder(@NonNull SelectViewHolder holder, int position) { SelectItem item = dataList.get(position); holder.textView.setText(item.getText()); holder.itemView.setSelected(item.isSelected()); } @Override public int getItemCount() { return dataList.size(); } } private class SelectViewHolder extends RecyclerView.ViewHolder { TextView textView; public SelectViewHolder(@NonNull View itemView) { super(itemView); textView = itemView.findViewById(R.id.text_view); itemView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { int position = getAdapterPosition(); if (position != RecyclerView.NO_POSITION) { SelectItem item = adapter.dataList.get(position); item.setSelected(true); adapter.notifyItemChanged(position); if (itemClickListener != null) { itemClickListener.onItemClick(item); } } } }); } } public interface OnItemClickListener { void onItemClick(SelectItem item); } public static class SelectItem { private String text; private boolean isSelected; public SelectItem(String text) { this.text = text; } public String getText() { return text; } public boolean isSelected() { return isSelected; } public void setSelected(boolean selected) { isSelected = selected; } } } ``` 这个件继承了 RecyclerView,并在初始化时设置了横向的 LinearLayoutManager、自定义的 SelectAdapter 和 LinearSnapHelper。SelectAdapter 用于绑定数据和管理视图,SelectViewHolder 用于绑定 item 布局中的件和设置点击监听器。另外,还定义了一个 SelectItem 类,用于保存选项的内容和状态。在 Activity 或 Fragment 中,你可以使用 setDataList() 方法设置数据源,使用 setOnItemClickListener() 方法设置选项的点击监听器。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值