Skip to content

Updating date-picker-new.html sample #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
damyanpetev merged 8 commits into from
Feb 20, 2017
Merged

Updating date-picker-new.html sample #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
50f50ce
Updating date-picker-new.html sample.
IvayloG Feb 17, 2017
02cb3d7
Removing naming related to the old sample.
IvayloG Feb 17, 2017
3026907
Updating samples requiring localization.
IvayloG Feb 17, 2017
b5b196b
Adding Eng strings
IvayloG Feb 17, 2017
7d96740
Removing excess strings
IvayloG Feb 17, 2017
62ab0ca
Clean up date picker sample CSS and results markup
damyanpetev Feb 20, 2017
8117480
Renaming sample name
IvayloG Feb 20, 2017
02df171
Added translations for date-picker-new sample
Feb 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 0 additions & 162 deletions HTMLSamples/editors/date-picker-new.html
View file
Open in desktop

This file was deleted.

119 changes: 119 additions & 0 deletions HTMLSamples/editors/date-picker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html>
<head>
<title>$$(Title_date-picker-new)</title>
<!-- Ignite UI Required Combined CSS Files -->
<link href="%%ignite-ui%%/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
<link href="%%ignite-ui%%/css/structure/infragistics.css" rel="stylesheet">
<style>
#container {
border: 1px solid #ccc;
box-sizing: border-box;
padding: 20px;
}

#igDatePickersContainer {
float: left;
}

.group-fields {
margin-bottom: 10px;
}

.group-fields label {
display: block;
line-height: 18px;
}

#ValuesContainer {
float: right;
}

.clearfix:after {
content: "";
display: table;
clear: both;
}

@media screen and (max-width:570px) {
#igDatePickersContainer,#ValuesContainer {
float: none;
}
#ValuesContainer {
margin-top:20px;
}
}
</style>

<script src="%%modernizr%%"></script>
<script src="%%jquery%%"></script>
<script src="%%jquery-ui%%"></script>

<!-- Ignite UI Required Combined JavaScript Files -->
<script src="%%ignite-ui%%/js/infragistics.core.js"></script>
<script src="%%ignite-ui%%/js/infragistics.lob.js"></script>
</head>
<body>
<div id="container" class="clearfix">
<div id="igDatePickersContainer">
<form id="form" name="FormSubmit" action="javascript:console.log('$$(Submit)');">
<div class="group-fields">
<label for="datePicker1">$$(Date_Object)</label>
<input id="datePicker1" type="date" name="datePicker_date"></input>
</div>
<div class="group-fields">
<label for="datePicker2">$$(Edit_Mode_Text)</label>
<input id="datePicker2" type="date" name="datePicker_editModeText"></input>
</div>
<div class="group-fields">
<label for="datePicker3">$$(Display_Mode_Text)</label>
<input id="datePicker3" type="date" name="displayModeText"></input>
</div>
<input type="submit" id="submitBtn" value="$$(Submit)"></input>
</form>
</div>

<div id="ValuesContainer">
<h4>$$(DatePickers_submited_values):</h4>
<div id="results">
</div>
</div>
</div>

<script type='text/javascript'>

$(function () {
$("#datePicker1").igDatePicker({
value: new Date(2017, 11, 8),
dataMode: "date",
dateDisplayFormat: "yyyy/MM/dd dddd"
});

$("#datePicker2").igDatePicker({
value: new Date(2017, 11, 8),
dataMode: "editModeText",
dateDisplayFormat: "yyyy/MM/dd dddd"
});

$("#datePicker3").igDatePicker({
value: new Date(2017, 11, 8),
dataMode: "displayModeText",
dateDisplayFormat: "yyyy/MM/dd dddd"
});

var headers = $('.group-fields label');
$("#form").submit(function (event) {
var submittedValues = $(this).serializeArray(),
$results = $("#results");
$results.empty();
for (var i = 0 ; i < submittedValues.length; i++) {
$results.append("<p class='p'><span class='header'>" + headers[i].textContent + ": " + "</span> <strong>" + submittedValues[i].value + "</strong></p>");
}
return false;
});
});

</script>

</body>
</html>
5 changes: 3 additions & 2 deletions HTMLSamples/editors/strings-en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@
"constraints": "Date Contraints, Hide Input Mask",
"Control_Name": "Control Name",
"date_config": "Date and Time Configuration",
"Date_Object":"Date object",
"Display_Mode_Text":"Display mode text",
"Edit_Mode_Text":"Edit mode text",
"DatePickers_submited_values": "DatePickers submitted values",
"default_config": "Default Configuration",
"End_Date": "End Date",
"enter_today": "Enter Today's Date",
"enUS": "English, United States",
"HTML_Element": "HTML Element",
Expand All @@ -22,7 +24,6 @@
"KO_Order_Date": "Order Date",
"KO_Plain_Editors": "Plain INPUTs",
"KO_Ship_Date": "Ship Date",
"Start_Date": "Start Date",
"Submit": "Submit",
"time_config": "Time Configuration",
"Title_angular": "AngularJS",
Expand Down
5 changes: 3 additions & 2 deletions HTMLSamples/editors/strings-ja.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
"date_config": "日付と時間構成",
"DatePickers_submited_values": "DatePicker の送信された値",
"default_config": "デフォルトの構成",
"End_Date": "終了日",
"Date_Object":"日付オブジェクト",
"Display_Mode_Text":"表示モードのテキスト",
"Edit_Mode_Text":"編集モードのテキスト",
"enter_today": "今日の日付の入力",
"enUS": "英語 (米国)",
"HTML_Element": "HTML 要素",
Expand All @@ -22,7 +24,6 @@
"KO_Order_Date": "注文日",
"KO_Plain_Editors": "プレーン INPUT 要素",
"KO_Ship_Date": "出荷日付",
"Start_Date": "開始日",
"Submit": "送信",
"time_config": "時間構成",
"Title_angular": "AngularJS との連携",
Expand Down