All Projects → tianxiangbing → mobile-select-date

tianxiangbing / mobile-select-date

Licence: other
手机联动选择日期

Programming Languages

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

Projects that are alternatives of or similar to mobile-select-date

Flatpickr
lightweight, powerful javascript datetimepicker with no dependencies
Stars: ✭ 14,575 (+35448.78%)
Mutual labels:  datepicker
nepali-date-picker
Nepali Date Picker jQuery Plugin 🇳🇵
Stars: ✭ 71 (+73.17%)
Mutual labels:  datepicker
praecox-datepicker
A date picker built with Svelte.Simple and flexible, supporting functions such as single selection, multiple selection, disabling, and marking.
Stars: ✭ 66 (+60.98%)
Mutual labels:  datepicker
Didatepicker
Yet another datepicker for iOS
Stars: ✭ 242 (+490.24%)
Mutual labels:  datepicker
nativescript-datetimepicker
Plugin with date and time picking fields
Stars: ✭ 26 (-36.59%)
Mutual labels:  datepicker
react-modern-datepicker
A modern date picker for react library
Stars: ✭ 19 (-53.66%)
Mutual labels:  datepicker
Vuejs Datepicker
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
Stars: ✭ 2,529 (+6068.29%)
Mutual labels:  datepicker
ic-datepicker
Angular (2+) datepicker component
Stars: ✭ 27 (-34.15%)
Mutual labels:  datepicker
datepickertimeline
Linear date picker for Jetpack compose
Stars: ✭ 43 (+4.88%)
Mutual labels:  datepicker
react-monthrange-picker
ReactJS month calendar component
Stars: ✭ 14 (-65.85%)
Mutual labels:  datepicker
Adm Datetimepicker
Pure AngularJs dateTimePicker
Stars: ✭ 244 (+495.12%)
Mutual labels:  datepicker
Vue Datepicker Ui
Datepicker Component For Vue
Stars: ✭ 252 (+514.63%)
Mutual labels:  datepicker
react-semantic-ui-datepickers
Datepickers built with Semantic UI for React and Dayzed.
Stars: ✭ 87 (+112.2%)
Mutual labels:  datepicker
Semantic Ui Calendar React
Datepicker react component based on semantic-ui-react components
Stars: ✭ 239 (+482.93%)
Mutual labels:  datepicker
vue-calendar-picker
Calendar component
Stars: ✭ 47 (+14.63%)
Mutual labels:  datepicker
Calendarview
A highly customizable calendar library for Android, powered by RecyclerView.
Stars: ✭ 2,862 (+6880.49%)
Mutual labels:  datepicker
monthyear-picker
Month and Year picker library for Android
Stars: ✭ 34 (-17.07%)
Mutual labels:  datepicker
RPicker
Simple and Easy-to-Use iOS Swift Date and Options Picker
Stars: ✭ 130 (+217.07%)
Mutual labels:  datepicker
Calendar.js
📅 A drag & drop event calendar (for Javascript), that is fully responsive and compatible with all modern browsers.
Stars: ✭ 29 (-29.27%)
Mutual labels:  datepicker
react-calendar-datetime-picker
A simple and fast date and time picker component for React
Stars: ✭ 58 (+41.46%)
Mutual labels:  datepicker

mobile-select-date

手机联动选择日期 效果图如下:

mobile-select-date

例子见DEMO

用法

<!DOCTYPE>
<html>
	<head>
		<title>时间选择器</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" type="text/css" href="../dist/mobile-select-area.css">
		<script type="text/javascript" src="../dist/zepto.js"></script>
		<script type="text/javascript" src="../dist/dialog.js"></script>
		<script type="text/javascript" src="../dist/mobile-select-area.js"></script>
		<script type="text/javascript" src="../dist/mobile-select-date.js"></script>
	</head>
	<body>
		<input type="text" id="txt_date"/>
		<script>
		var selectDate = new MobileSelectDate();
		selectDate.init({trigger:'#txt_date',value:'2011/03/02',min:'1990/01/01',max:'2016/02/11'});
		</script>
	</body>
</html>

属性及方法

position:'bottom'

当这个值为bottom时,弹层固定显示在底部,不传时居中显示,默认居中.

default:0||1

0为空,true时默认选中第一项,默认1

trigger:

触发弹窗的DOM元素 ,可以是input或其他

callback:

选中后的回调,默认有填充trigger的value值,以‘/’分隔

valueYYYY/MM/dd

默认值

min:string

最小值,默认""1900/01/01""

max:string

最大值,默认当前时间
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].