`
flyinglife
  • 浏览: 132340 次
社区版块
存档分类
最新评论

让普通的input=text弹出DatePicker

阅读更多

只要设置好id就行了,其他参数配置默认Ext.DatePicker

 

html 如下:

<input id='dateSign' type="text" size="10"> 

 js如下:

 

/** 谢忠持 扩张插件 支持普通input=text显示日期 **/
Ext.ux.DatePicker = Ext.extend(Ext.DatePicker, {
	afterRender: function(){
		this.el.setStyle('position', 'absolute');
		this.el.setLeftTop(Ext.get(this.renderTo).getX(),Ext.get(this.renderTo).getY()+Ext.get(this.renderTo).getHeight());
		this.on("select",function(src,date){   
	    	Ext.getDom(this.renderTo).value=date.format(this.format);   
	    	this.hide();
	    });
		var datePicker = this;
		Ext.get(this.renderTo).on('click', function(){
			if(!datePicker.hidden){
				datePicker.hide();
			}else{
				datePicker.show(); 
			}
		});
	}
});

var dateSign = new Ext.ux.DatePicker({
         applyTo: "dateSign",   
         renderTo: "dateSign",    
         hidden: "true",   
         format: "Y-m-d"
});

 

分享到:
评论

相关推荐

    点击input,弹出日期选择框

    在网页设计和开发中,创建用户友好的交互是至关重要的,而“点击input,弹出日期选择框”正是实现这一目标的一种常见方法。这个功能可以让用户方便地输入或选择日期,提高了数据输入的准确性和效率。下面我们将详细...

    jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日

    而`jquery.datePicker`是jQuery的一个扩展插件,用于实现日期选择功能,通常与输入框(input[type="text"])结合使用,为用户提供一个友好的日期选择界面。这个插件提供了丰富的自定义选项和灵活的API,可以方便地...

    My97DatePicker日历弹出

    My97DatePicker是一款在中国广泛应用的JavaScript日期选择插件,它为网页表单提供了美观、易用的日历弹出功能。这款插件以其丰富的自定义选项、兼容性好以及高性能而受到开发者的青睐。在本压缩包中,包含了My97...

    jquery.datePicker日期选择器text文本框弹出日历

    `jquery.datePicker`提供了一个简洁、易用的界面,用户只需点击文本框,就能弹出一个日历视图,从中选择所需的日期。这个插件通常与HTML的`&lt;input&gt;`元素配合使用,将`type`属性设置为`text`,然后通过CSS和...

    jquery datepicker日历控件支持多种颜色弹出日历

    &lt;input type="text" id="datePicker"&gt; $(function() { $( "#datePicker" ).datepicker(); }); ``` 这段代码会在id为`datePicker`的输入框上添加一个日期选择器。默认情况下,`datepicker`的样式会遵循jQuery UI...

    My97DatePicker

    它以弹出的日历视图形式出现,用户可以通过鼠标点击或键盘操作轻松选择日期,同时支持日期范围选择,满足了多种场景的需求。此外,它还提供了多种皮肤样式,可以轻松适应不同网页设计风格。 该插件的核心特性包括:...

    My97DatePicker.rar

    在这个例子中,当用户点击ID为"demo"的输入框时,会弹出My97 DatePicker的日历供用户选择日期。 总的来说,My97 DatePicker凭借其强大的功能、良好的兼容性、丰富的定制选项以及易于集成的特点,成为了前端开发中...

    My97DatePicker js的时间日期控件

    &lt;input type="text" id="datepicker" onclick="WdatePicker()" /&gt; ``` 在这个例子中,当用户点击id为`datepicker`的input元素时,会弹出My97DatePicker的日历供用户选择日期。 除了基本的日期选择功能,My97...

    My97DatePicker4.72

    在这个例子中,当用户点击输入框时,My97 DatePicker 会弹出日期选择窗口,用户选择日期后,日期会被自动填充到输入框中。 总结,My97 DatePicker 4.72作为一款优秀的日期选择控件,不仅提供了丰富的功能,还注重...

    时间选择器javascript脚本 My97DatePicker

    这个例子展示了如何初始化一个中文版本的日期选择器,并在日期改变时弹出提示框显示所选日期。 总结,`My97 DatePicker` 是一款强大的JavaScript日期选择器,通过简单的配置和使用,可以为你的网站提供高质量的日期...

    点击text文本框弹出日期选择器

    总的来说,"点击text文本框弹出日期选择器"是通过结合jQuery和一个日期选择器插件实现的,它提高了用户在网页上输入日期的效率,同时也提升了用户体验。通过理解并应用这些技术,开发者可以创建出更加友好和功能丰富...

    My97DatePicker时间选择框,内含jsp文件

    &lt;input type="text" id="datePicker" onclick="WdatePicker({onSelect:function(date){alert('选择的日期是:' + date)}})" readonly="readonly"&gt; ``` 在这个例子中,当用户选择日期后,会弹出一个警告框显示所选...

    my97datepicker

    2. **自定义弹出日历样式**:可以修改CSS样式来自定义日期选择窗口的外观,如字体、背景色等。 3. **日期范围限制**:通过设置`minDate`和`maxDate`参数,限制用户可以选择的日期范围。 4. **事件监听**:控件提供...

    很好用的日期插件My97DatePicker

    首先,My97DatePicker的界面设计简洁明了,用户可以通过弹出的日历视图轻松选择日期,大大提高了用户体验。它支持多种日期格式,如“YYYY-MM-DD”、“MM/DD/YYYY”等,可以根据项目的实际需求进行设置,满足不同的...

    jquery datepicker 小例子

    &lt;input type="text" id="datepicker"&gt; ``` 接下来,我们需要在JavaScript中初始化`datepicker`。这通常在文档加载完成后执行,以确保DOM已经准备好: ```javascript $(document).ready(function() { $("#...

    My97DatePicker日历控件

    在这个例子中,当用户点击输入框时,My97DatePicker日历控件会自动弹出,允许用户选择日期,然后将所选日期填充到输入框中。 总之,My97 DatePicker凭借其强大且灵活的功能,为Web开发者提供了一种高效、易用的日期...

    javaScript实现点击文本框text弹出日期选择控件源码.zip

    在这个场景中,我们讨论的是使用JavaScript实现一个功能,即当用户点击文本框(text input)时,能够弹出一个日期选择控件,提供用户方便地选择日期。这种功能在网页表单中非常常见,比如在填写生日、预约日期等场景...

    My97DatePicker.zip

    在demo.htm中,可能会包含一个简单的JSP表单,其中包含一个日期输入字段,当用户点击该字段时,My97DatePicker会弹出一个日历视图供用户选择日期。 在使用My97DatePicker时,你需要将`My97DatePicker`的JavaScript...

    My97DatePicker.7z

    点击此input框时,My97 DatePicker 将自动弹出日期选择器。 三、My97 DatePicker 高级特性 1. 日期格式化:可以通过设置`format`参数来控制日期显示格式,如: ```javascript &lt;input id="date" type="text" ...

    My97DatePicker时间控件使用

    在这个例子中,`onclick="WdatePicker()"` 是触发时间控件的关键,它会使得输入框在点击时弹出日期选择器。通过设置不同的参数,我们可以定制更多功能,例如设置默认日期、限制选择范围等。 例如,如果我们希望默认...

Global site tag (gtag.js) - Google Analytics