使用Javascript / JQuery跟踪DatePicker控件中的日期时间更改

时间:2014-11-06 15:11:17

标签: sharepoint

我的SharePoint日历列表中有两个日期选择器控件(开始日期和结束日期)。 我需要动态计算小时差异并在文本框中显示。

有人可以帮助我使用客户端脚本来完成此任务吗?

先谢谢你。 巨力

2 个答案:

答案 0 :(得分:0)

查看moment.js

它有许多内置函数。

答案 1 :(得分:0)

`HERE WE Go...`
<script type="text/javascript" language="javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.2/jquery.SPServices-0.7.2.min.js">              </script>
<script type="text/javascript" language="javascript">
//function for binding on change event to date picker control
$(document).ready(function() 
{
MyDateField = getTagFromIdentifierAndTitle('Input', '', 'Start Time');    
MyDateField.onchange=function() {TimeHasChanged()};
var MyMinuteField = $('#'+MyDateField.id+'Minutes');
var MyHourField = $('#'+MyDateField.id+'Hours');
MyMinuteField[0].onchange=function() {TimeHasChanged()};
MyHourField[0].onchange=function() {TimeHasChanged()};
MyDateField.onvaluesetfrompicker=function() {TimeHasChanged()};

MyEndField = getTagFromIdentifierAndTitle('Input', '', 'End Time'); 
MyEndField.onchange=function() {TimeHasChanged()};
var MyEndMinuteField = $('#'+MyEndField.id+'Minutes');
var MyEndHourField = $('#'+MyEndField.id+'Hours');
MyEndMinuteField[0].onchange=function() {TimeHasChanged()};
MyEndHourField[0].onchange=function() {TimeHasChanged()};
MyEndField.onvaluesetfrompicker=function() {TimeHasChanged()};
});

//Override the OnPickerFinish function in DatePicker.js to fire the event when the date is updated from the date picker.
function OnPickerFinish(resultfield)  
{
clickDatePicker(null,"","");
if (resultfield.id == MyDateField.id){TimeHasChanged();}
if (resultfield.id == MyEndField.id){TimeHasChanged();}
}

function TimeHasChanged() 
{

var customstartdate = MyDateField.value;
var datestart = new Date(customstartdate);
var customenddate = MyEndField.value;
var dateend = new Date(customenddate);
var DateDiff = {inDays: function(datestart, dateend) 
{
    var t2 = dateend.getTime();
        var t1 = datestart.getTime();

        return parseInt((t2-t1)/(24*3600*1000));
}
    }              
var txthours = DateDiff.inDays(datestart, dateend) + 1;
alert(txthours);

}

function getTagFromIdentifierAndTitle(tagName, identifier, title) 
{
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++) 
{
    var tempString = tags[i].id;
    if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) 
    {
        return tags[i];
    }
}
return null;
}

</script>

快乐编码...... Juli