<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<table>
<tr>
<td>
<div>India</div>
</td>
<td><input type="text" value="" id="datetimepicker"/></td>
</tr>
<tr>
<td>
<select id="ddlFirstCountry">
<option value="Select">--Select--</option>
</select>
</td>
<td><div id="ddlFirstCountryclock"></div></td>
</tr>
<tr>
<td>
<select id="ddlSecondCountry">
<option value="Select">--Select--</option>
</select>
</td>
<td><div id="ddlSecondCountryclock"></div></td>
</tr>
<tr>
<td>
<select id="ddlThirdCountry">
<option value="Select">--Select--</option>
</select>
</td>
<td><div id="ddlThirdCountryclock"></div></td>
</tr>
<tr>
<td>
<select id="ddlFourthCountry">
<option value="Select">--Select--</option>
</select>
</td>
<td><div id="ddlFourthCountryclock"></div></td>
</tr>
<tr>
<td>
</td>
<td><input value="Refresh" type="submit"/></td>
</tr>
</table>
<div id="clock_hou"></div>
<div class="ms-hide">
<WebPartPages:WebPartZone runat="server" title="loc:TitleBar" id="TitleBar" AllowLayoutChange="false" AllowPersonalization="false" Style="display:none;"><ZoneTemplate>
<WebPartPages:TitleBarWebPart runat="server" HeaderTitle="Untitled_1" Title="Web Part Page Title Bar" FrameType="None" SuppressWebPartChrome="False" Description="" IsIncluded="True" ZoneID="TitleBar" PartOrder="2" FrameState="Normal" AllowRemove="False" AllowZoneChange="True" AllowMinimize="False" AllowConnect="True" AllowEdit="True" AllowHide="True" IsVisible="True" DetailLink="" HelpLink="" HelpMode="Modeless" Dir="Default" PartImageSmall="" MissingAssembly="Cannot import this Web Part." PartImageLarge="" IsIncludedFilter="" ExportControlledProperties="True" ConnectionID="00000000-0000-0000-0000-000000000000" ID="g_5e0ec1af_7283_43c4_b07e_43ad8b05e688" AllowClose="False" ChromeType="None" ExportMode="All" __MarkupType="vsattributemarkup" __WebPartId="{5E0EC1AF-7283-43C4-B07E-43AD8B05E688}" WebPart="true" Height="" Width=""></WebPartPages:TitleBarWebPart>
</ZoneTemplate></WebPartPages:WebPartZone>
</div>
<table class="ms-core-tableNoSpace ms-webpartPage-root" width="100%">
<tr>
<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" width="100%">
<WebPartPages:WebPartZone runat="server" Title="loc:FullPage" ID="FullPage" FrameType="TitleBarOnly"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
</tr>
</table>
<link rel="stylesheet" type="text/css" href="../SiteAssets/jClocksGMT-master/css/jClocksGMT.css"/>
<link rel="stylesheet" type="text/css" href="../SiteAssets/jClocksGMT-master/css/jquery.datetimepicker.min.css"/>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="../SiteAssets/jClocksGMT-master/js/jquery.rotate.js"></script>
<script src="../SiteAssets/jClocksGMT-master/js/jClocksGMT.js"></script>
<script src="../SiteAssets/jClocksGMT-master/js/jquery.datetimepicker.full.js"></script>
<script type="text/javascript">
var dateStart = new Date();
$('#datetimepicker').datetimepicker({
mask:'9999/19/39 29:59',
step:30,
yearStart:dateStart.getFullYear(),
yearEnd:(dateStart.getFullYear() +1)
});
$('select').on('change', function() {
if($(this).find("option:selected").text() !='--Select--')
{
custmdatetime=$('#datetimepicker').val();
if((custmdatetime !='____/__/__ __:__') && (custmdatetime !='') )
{
$('#'+this.id+'clock').html('');
$('#'+this.id+'clock').jClocksGMT(
{
title: $(this).find("option:selected").text(),
offset: this.value,
analog:false
});
}
else
{
alert('date can not blank!!');
return false;
}
}else
{
alert('Please select right option!!');
return false;
}
//alert( this.value );
//alert( this.id );
})
$(document).ready(function(){
var urlForAllItems = "/_api/Web/Lists/GetByTitle('globalclockMaster')/Items";
BindDropDown(urlForAllItems);
/* $('#clock_hou').jClocksGMT(
{
title: 'Houston, TX, USA',
offset: '-6',
analog:false,
custmdatetime:'October 13, 2014 12:13:00'
});*/
});
function BindDropDown(url) {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + url,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
//console.log(data.d.results);
var usedNames = [];
$.each(data.d.results, function (key, value)
{
if (usedNames.indexOf(value.Company_x0020_Name) == -1) {
$("#ddlFirstCountry").append("<option value=" + value.GMTOffset + ">" + value.country_title + "</option>");
$("#ddlSecondCountry").append("<option value=" + value.GMTOffset + ">" + value.country_title + "</option>");
$("#ddlThirdCountry").append("<option value=" + value.GMTOffset + ">" + value.country_title + "</option>");
$("#ddlFourthCountry").append("<option value=" + value.GMTOffset + ">" + value.country_title + "</option>");
usedNames.push(value.country_title);
}
});
//$('#ddlCompanyName').selectpicker('refresh');
//$('#ddlCompanyName').selectpicker('render');
},
error: function (error) {
//alert(JSON.stringify(error));
}
});
}
</script>
</asp:Content>
CSS jClocksGMT.css
.jcgmt-container {
float:left;
padding: 3px;
}
.jcgmt-container .jcgmt-lbl {
font-size:10px;
color: #333333;
line-height: 22px;
background: url(../images/jcgmt-clock_label.png) no-repeat;
text-align: center;
padding-bottom: 5px;
width: 108px;
margin: 0 auto;
}
.jcgmt-clockHolder {
width:100px;
margin:0 auto;
position:relative;
overflow: hidden;
}
.jcgmt-sec,
.jcgmt-min,
.jcgmt-hour {
display:block;
position:absolute;
}
.jcgmt-rotatingWrapper {
position:absolute;
width:100px;
height:100px;
}
.jcgmt-digital,
.jcgmt-date {
font-weight:bold;
font-size: 12px;
color: #444444;
text-align:center;
margin-left:8px;
}
No comments:
Post a Comment