All Projects → melodyne → DatePicker

melodyne / DatePicker

Licence: other
html价格日历控件

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to DatePicker

Vue Mj Daterangepicker
🗓Vue.js date range picker with multiples ranges and presets (vue 2.x)
Stars: ✭ 48 (+128.57%)
Mutual labels:  datepicker, date-picker
Ngx Mydatepicker
Angular 2+ attribute directive datepicker
Stars: ✭ 123 (+485.71%)
Mutual labels:  datepicker, date-picker
Angular Mydatepicker
Angular datepicker and date range picker 📅
Stars: ✭ 76 (+261.9%)
Mutual labels:  datepicker, date-picker
Jtsage Datebox
A multi-mode date and time picker for Bootstrap (3&4), jQueryMobile, Foundation, Bulma, FomanticUI, and UIKit (or others)
Stars: ✭ 481 (+2190.48%)
Mutual labels:  datepicker, date-picker
monthyear-picker
Month and Year picker library for Android
Stars: ✭ 34 (+61.9%)
Mutual labels:  datepicker, date-picker
Mydatepicker
Angular 2+ date picker
Stars: ✭ 558 (+2557.14%)
Mutual labels:  datepicker, date-picker
Datepicker
仿滴滴出行预约打车IOS风格3D时间选择器 🌲
Stars: ✭ 118 (+461.9%)
Mutual labels:  datepicker, date-picker
angular-eonasdan-datetimepicker
A wrapper directive around the Eonasdan Datepicker v4 component.
Stars: ✭ 63 (+200%)
Mutual labels:  datepicker, date-picker
nepali-date-picker
Nepali Date Picker jQuery Plugin 🇳🇵
Stars: ✭ 71 (+238.1%)
Mutual labels:  datepicker, date-picker
Vuejs Datepicker
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
Stars: ✭ 2,529 (+11942.86%)
Mutual labels:  datepicker, date-picker
Calendarview
An Easy to Use Calendar for iOS (Swift 5.0)
Stars: ✭ 429 (+1942.86%)
Mutual labels:  datepicker, date-picker
flutter date picker timeline
Gregorian and Jalali customizable date picker as a horizontal timeline
Stars: ✭ 29 (+38.1%)
Mutual labels:  datepicker, date-picker
Angular Datepicker
Highly configurable date picker built for Angular applications
Stars: ✭ 386 (+1738.1%)
Mutual labels:  datepicker, date-picker
React Nice Dates
A responsive, touch-friendly, and modular date picker library for React.
Stars: ✭ 924 (+4300%)
Mutual labels:  datepicker, date-picker
vue-single-date-picker
A Vue project - single date picker
Stars: ✭ 16 (-23.81%)
Mutual labels:  datepicker, date-picker
Date Picker
Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/
Stars: ✭ 1,325 (+6209.52%)
Mutual labels:  datepicker, date-picker
vuejs3-datepicker
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.
Stars: ✭ 23 (+9.52%)
Mutual labels:  datepicker, date-picker
Datepicker
Get a date with JavaScript! A datepicker with no dependencies.
Stars: ✭ 212 (+909.52%)
Mutual labels:  datepicker, date-picker
react-calendar
A no dependencies, lightweight and feature-rich ⚡ calendar component for react.
Stars: ✭ 68 (+223.81%)
Mutual labels:  datepicker, date-picker
s-date-range-picker
📅 A date range picker built with Svelte
Stars: ✭ 13 (-38.1%)
Mutual labels:  datepicker, date-picker

DatePicker 价格日历控件

体验地址(这里演示只是静态数据修改不会生效,实际功能需要结合你业务接口) https://melodyne.github.io/DatePicker

效果图

接口数据格式
[
    {
        "day": "2016-07-07",
        "price": "158"
    },
    {
        "day": "2017-07-11",
        "price": "158"
    },
    {
        "day": "2017-07-12",
        "price": "158"
    },
    {
        "day": "2017-07-13",
        "price": "158"
    },
    {
        "day": "2017-07-14",
        "price": "158"
    },
    {
        "day": "2017-07-15",
        "price": "158"
    }
]

第一步:引入这三个文件

<link href="css/datepicker.css" rel="stylesheet"/>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/zlDate.js"></script>

第二步:初始化组件

pickerEvent.setPriceArr(data);
pickerEvent.Init(e);

第三步:全局实现修改价格方法

/**
 * 修改价格
 * @param date           // 日期
 * @param newPrice       // 新价格
 * @param calendarPrice  // 日历控件对象
 */
function changePrice(date, newPrice, calendarPrice) {
    
    alert('修改价格' + date + "天的价格为" + newPrice);
    
    /*
       在这里实现修改,也就是在这里用调用你的修改接口
       修改成功 则执行 calendarPrice.show();
     */
     
}

控件位置

location="right" 其中值有top,right,bottom,left 分别居于按钮的上,右,下,左

<input style="width: 124px" location="right" class="calendar_btn" name="calendar" readonly="readonly"
           onclick="showCalendar(this,'232');" placeholder="酒店价格日历"/>

该代码是从大型项目中抽取出来的,如果您觉得我的此项目对您有些帮助,您的star就是对我最大的鼓励!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].