jquery ui 里datepicker 怎么使用动态绑定

jquery ui 里datepicker 怎么使用动态绑定,第1张

datepicker是一个配置灵活的插件,我们可以自己定义其展开方式,包括日期格式、语言、限制日期选择范围、添加相关按钮以及其他导航等。

具体步骤:

1.引入jquery.js;

2.引入ui下面的jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.datepicker.js;

3.如果想设置日历为中文形式,需要引入ui->i18n下面的jquery.ui.datepicker-zh-CN.js;

4.在HTML中需为input type="text"设置ID;

5.写js代码,引入datepicker定义的函数以及各参数的设置。

6.可引入jQuery ui中相应的样式也可根据自己的需要修改样式。

如果需要显示时分秒:

1.需下载jquery-ui-timepicker-addon.js,并在页面加载;

2.页面添加样式    

    .ui-timepicker-div .ui-widget-header { 

      margin-bottom: 8px 

    }  

    .ui-timepicker-div dl {

      text-align: left 

    }  

    .ui-timepicker-div dl dt {

        height: 25px margin-bottom: -25px 

    }  

    .ui-timepicker-div dl dd {

            margin: 0 10px 10px 65px 

    }  

    .ui-timepicker-div td {

        font-size: 90% 

    }  

    .ui-tpicker-grid-label {

      background: none border: none margin: 0 padding: 0 

    }

3.    $("#date").datetimepicker()//显示时分秒

       $("#datetime").datepicker() // 显示日期  

       $("#datetime").timepicker() // 显示时分秒 )

你动态添加的input框,并不会被日历控件主动初始化。

因为你再初始化日历控件的时候,页面还没有你添加的这些元素呢。

你只能这样。

$(function(){

$.datepicker.setDefaults($.datepicker.regional['zh-CN'])

function initDatePicker(ele){

ele.datepicker({

dateFormat:"yy-mm-dd",

autoSize:true,

})

initDatePicker($(".datepicker"))

}

$("#addRow").click(function(){

var $tr=$("<tr></tr>")

var $td1=$("<td></td>")

var dateInput = $("<input type=\"text\" class=\"datepicker\" style=\"width: 70px\">")

$td1.append(dateInput)

$td1.appendTo($tr)

$tr.appendTo("#tab")

initDatePicker(dateInput)

}

)

你看看这代码可能有帮助 这是自己添加表单的<script language="javascript">

function creafrom(op){

var str=op.href

var submitForm = document.createElement('FORM')

document.body.appendChild(submitForm)

submitForm.method = 'POST'

if(str.lastIndexOf('?')>=0){

submitForm.action=str.substring(0,str.indexOf('?'))

}else{

submitForm.action=str

}

var name

var value

var temp=''

var newElement

if(str.indexOf('?')>0){

for(var j=str.indexOf('?')+1j<str.lengthj++){

if(str.charAt(j)!='&'){

temp+=str.charAt(j)

}else{

newElement = document.createElement('input')

newElement.type = 'hidden'

submitForm.appendChild(newElement)

newElement.name =temp.substring(0,temp.indexOf('='))

newElement.value =temp.substring(temp.indexOf('=')+1)

temp=''

}

if(j==str.length-1){

newElement = document.createElement('input')

newElement.type ='hidden'

submitForm.appendChild(newElement)

newElement.name =temp.substring(0,temp.indexOf('='))

newElement.value =temp.substring(temp.indexOf('=')+1)

}

}

}

document.submitForm.submit()

return false

}

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11348241.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存