Search This Blog

Sunday, July 30, 2017

In JSOM Display GMT Time A Particular date Time in Different Location




<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