如何实现价格日历并设置价格？

[风动之石]

我们现在在做类似于旅游网站的项目，在后台的运营支撑平台里，根据 PM 的需求，对某东西设置价格，可能每个月、每一天的价格是不同的，价格的设置和查看均以价格日历的形式呈现。
价格设置（可以每个月统一设为一个值，再根据需要单独对每一天进行设置）


查看价格


请问有没有现成的插件可以完成这项工作？网上找了一圈，有相关查看价格的日历控件但没有在价格日历上设置价格的控件。
如果实在没办法需要自己写，该如何着手？

[神之左手]

从两个方面考虑啊 1.界面设计和操作流程设计（用户体验，前端技术等等） 2.数据保存（AJAX，服务端脚本，数据库技术等等） 1，如你给的例子，界面的整体基本已经成型，要完善的就是具体的某一个日如果价格不一样，那么点击日则弹出该日的价格修改界面，这个是需要完善的，其他则按当前界面处理就行了，唯一需要注意的就是年份闰与不闰对二月的天数的影响，另外要套农历或者节日的话，应该有相关数据可供调用，网上找下现成的算法就可以了 2，数据保存是大头，首先你的数据库怎么设计是需要思考的，可以用365（366）个数据记录来保存一年中每天的价格，显然可能有多天价格是重复的，所以重复记录不少，如此自然很浪费数据库空间，也可以用月价格和特例日价格来记录，如此12条月价格记录和N多特例日价格也还可以接受，当然应该还有更优化的方法。剩下就是前端数据如何传递给服务端脚本进行保存，前端数据传递可以按数据库结构组合成JSON数据，服务端脚本就好处理一些 整体其实没有太大难度，唯独操作流程上要做的尽善尽美则前段代码要花不少时间。

[roffer]

照着你的样式写了个demo，效果如下：

demo下载地址

[风动之石]

引用 5 楼 dulongfie 的回复:

照着你的样式写了个demo，效果如下...

赞！万分感谢！ 我自己也把页面写出来了，但是用的日期数据是模拟的，我是想让后台传给我。 我遇到的问题主要是不知道怎么把某年某月的日期计算出来，正好可以看看你写的。

[roffer]

引用 6 楼 cxl444905143 的回复:

[quote=引用 5 楼 dulongfie 的回复:] 照着你的样式写了个demo，效果如下...

赞！万分感谢！ 我自己也把页面写出来了，但是用的日期数据是模拟的，我是想让后台传给我。 我遇到的问题主要是不知道怎么把某年某月的日期计算出来，正好可以看看你写的。 [/quote] 数据这块，我就没办法给你弄了，除非你让后台开发人员把数据以json的格式贴出来。页面解析json数据，然后填充进去就好了。

[roffer]

哦，忘了提醒你，双击单元格即可编辑单个价格

[风动之石]

引用 1 楼 wanglei19830426 的回复:

从两个方面考虑啊 1.界面设计和操作流程设计（用户体验，前端技术等等） 2.数据保存（AJAX，服务端脚本，数据库技术等等） ...

嗯，谢谢你的热心回答，我是在某公司实习的 FE，只要做好前端即可，我只有4天的时间完成这个功能，之后就要结束实习了，请问如何在最快的时间内完成这个功能的前端开发工作？

[风动之石]

引用 1 楼 wanglei19830426 的回复:

从两个方面考虑啊 1.界面设计和操作流程设计（用户体验，前端技术等等） 2.数据保存（AJAX，服务端脚本，数据库技术等等） ...

另外，上面的图片不是已经实现的页面，而是 PM 绘制的图，要让我去实现..

[神之左手]

是做前端的话，按你的需求要做几个工作 1.让PM把日期价格变更的页面设计出来给你 2.把设计页面HTML化 3.跟后端人员沟通，要给服务端的数据应该是什么格式的 比如JSON的{"5":400,"6":700,"1424926223":360}，以及传递给哪个页面 4.书写JS脚本，实现日期价格展现（如果后端给你的是JSON数据的话需要JS做展现，如果后端给的是页面那就调整CSS样式即可，但一般应该是前者） 5.书写JS脚本，实现交互与提交功能 建议楼主把目的当作自己对前端的认识与学习再去做这些比较好，否则是当工作来完成，几天时间内恐怕是来不及完成的

[roffer]

引用 9 楼 cxl444905143 的回复:

[quote=引用 8 楼 dulongfie 的回复:] 哦，忘了提醒你，双击单元格即可编辑单个价格

这些都没有问题了，最后一个问题是，从何处获取那些节假日的信息？比如说这个月18号是春节，如何知道18号是除夕这个信息的？[/quote] 这个也可以实现，需要将公历转换成农历。

[roffer]

引用 9 楼 cxl444905143 的回复:

[quote=引用 8 楼 dulongfie 的回复:] 哦，忘了提醒你，双击单元格即可编辑单个价格

这些都没有问题了，最后一个问题是，从何处获取那些节假日的信息？比如说这个月18号是春节，如何知道18号是除夕这个信息的？[/quote] 农历的节日显示，已更新上去了，新版本下载地址：点击下载

[风动之石]

引用 8 楼 dulongfie 的回复:

哦，忘了提醒你，双击单元格即可编辑单个价格

这些都没有问题了，最后一个问题是，从何处获取那些节假日的信息？比如说这个月18号是春节，如何知道18号是除夕这个信息的？

[qq_36078343]

引用 5 楼 dulongfie 的回复:

照着你的样式写了个demo，效果如下： demo下载地址

能发给我吗 [e-mail]

[yangguosheng]

引用 11 楼 dulongfie 的回复:

[quote=引用 9 楼 cxl444905143 的回复:] [quote=引用 8 楼 dulongfie 的回复:] 哦，忘了提醒你，双击单元格即可编辑单个价格

这些都没有问题了，最后一个问题是，从何处获取那些节假日的信息？比如说这个月18号是春节，如何知道18号是除夕这个信息的？[/quote] 农历的节日显示，已更新上去了，新版本下载地址：点击下载[/quote] 您好，demo能给我一份吗？[e-mail]