I have a script element with HTML content to be added dynamically to page
I've tried adding it using jQuery with the following code:
let template = jQuery.validator.format($.trim($('#customTemplate').html()));
$($(template()).html()).appendTo('.custom-class');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js" integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/html" id="customTemplate">
<div class="col-sm-4">
<div class="form-group">
<label>Days: <span class="text-danger">*</span></label>
<input type="date" name="Days" placeholder="Days..." class="form-control required data-required">
</div>
</div>
</script>
Why the trim?
Why not a template
This works
let template = $('#customTemplate')[0].content;
$('.custom-class').append(template)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<template id="customTemplate">
<div class="col-sm-4">
<div class="form-group">
<label>Days: <span class="text-danger">*</span></label>
<input type="date" name="Days" placeholder="Days..." class="form-control required data-required">
</div>
</div>
</template>
<div class="custom-class"></div>
Related
I am making a code that requests course grades and sends them to a spreadsheet. I am familiar with Javascript; however, I am less familiar with HTML. Because not every person is taking the same courses or even the same number of courses, I wanted to send each student a custom url that contains the parameters of their name and what courses they are taking. That way the information could be populated into the HTML page and all the student would need to do is type in their grades for the corresponding courses. Then when submitted, it would send that information to a spreadsheet and handled accordingly. However, I am unsure of how I could pass parameters on to an HTML page. I am sure that it is simple but I dont know how to do it. If someone could provide some guidance it would be greatly appreciated. Below I have included the main HTML file that dictates the output. I am also including links to the other code. https://script.google.com/d/1c2XOZc5bmlnxT0ayWfYpJd4d6pKmZ8rgSiEZ-9NJ8CZIhvdjpEqSJ5X6/edit?usp=sharing
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">Input Grades Below</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class001" id = "class_01" hidden>Class1</label>
<input type="text" class="form-control" id="grade001" name="grade00" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class002" id = class_02 hidden>Class2</label>
<input type="text" class="form-control" id="grade002" name="grade002" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class003" id = "class_03" hidden>Class3</label>
<input type="text" class="form-control" id="grade003" name="grade003" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class004" id = class_04 hidden>Class4</label>
<input type="text" class="form-control" id="grade004" name="grade004" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class005" id = class_05 hidden>Class5</label>
<input type="text" class="form-control" id="grade005" name="grade005" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class006" id = class_06 hidden>Class6</label>
<input type="text" class="form-control" id="grade006" name="grade006" placeholder="Grade" hidden>
</div>
</div>
<script>
//Script to to implement to change class labels
</script>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
You can use google.script.url.getLocation() to get the current URL parameters and hash.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script>
// URL = https://script.google.com/macros/s/SCRIPTKEY/exec?parameter=value#hash
google.script.url.getLocation(function(location) {
console.log(location.parameters); // {parameter: ["value"]}
console.log(location.hash); // "hash"
});
</script>
</body>
</html>
I have a thymeleaf template for form input where I use a js script. When in template it works fine but when I try to exclude it to external file it stops working. Probably I don't import it correctly but don't know what to change here because everything seems normal. Here are template and script (langSelect.js) files
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<header>
<title th:text="#{input.form.title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</header>
<body>
<h1 th:text="#{input.form}"></h1>
<div class="col-md-6">
<form action="#" th:action="#{/register}" th:object="${userForm}" method="post">
<div class="form-row">
<div class="form-group col">
<label th:text="#{first.name}"></label>
<input type="text" th:unless="${#fields.hasErrors('firstName')}" class="form-control"
th:placeholder="#{first.name}" th:field="*{firstName}">
<input type="text" th:if="${#fields.hasErrors('firstName')}" class="form-control alert-danger"
th:placeholder="#{first.name}" th:field="*{firstName}">
<span th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}"></span>
</div>
<div class="form-group col">
<label th:text="#{last.name}"></label>
<input type="text" th:unless="${#fields.hasErrors('lastName')}" class="form-control"
th:placeholder="#{last.name}" th:field="*{lastName}">
<input type="text" th:if="${#fields.hasErrors('lastName')}" class="form-control alert-danger"
th:placeholder="#{last.name}" th:field="*{lastName}">
<span th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}"></span>
</div>
</div>
<div class="form-group">
<label th:text="#{email}"></label>
<input type="text" th:unless="${#fields.hasErrors('email')}" class="form-control"
th:placeholder="#{email}" th:field="*{email}">
<input type="text" th:if="${#fields.hasErrors('email')}" class="form-control alert-danger"
th:placeholder="#{email}" th:field="*{email}">
<span th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
</div>
<div class="form-group">
<label th:text="#{password}"></label>
<input type="text" th:unless="${#fields.hasErrors('passwordsEqual')}" class="form-control"
th:placeholder="#{password}" th:field="*{password}">
<input type="text" th:if="${#fields.hasErrors('passwordsEqual')}" class="form-control alert-danger"
th:placeholder="#{password}" th:field="*{password}">
<span th:if="${#fields.hasErrors('passwordsEqual')}" th:errors="*{password}"></span>
</div>
<div class="form-group">
<label th:text="#{password.repeat}"></label>
<input type="text" th:unless="${#fields.hasErrors('passwordsEqual')}" class="form-control"
th:placeholder="#{password.repeat}" th:field="*{passwordRepeat}">
<input type="text" th:if="${#fields.hasErrors('passwordsEqual')}" class="form-control alert-danger"
th:placeholder="#{password.repeat}" th:field="*{passwordRepeat}">
<span class="error" th:if="${#fields.hasErrors('passwordsEqual')}" th:errors="*{passwordsEqual}"></span>
</div>
<input class="btn-primary" type="submit" value="Submit"/> <input class="btn-primary" type="reset"
value="Reset"/>
</form>
<p></p>
<p></p>
<p></p>
<span th:text="#{lang.change}"></span>
<select id="locales">
<option value=""></option>
<option value="en" th:text="#{lang.eng}"></option>
<option value="ru" th:text="#{lang.ru}"></option>
<script type="javascript" src="langSelect.js"></script>
</select>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
$(document).ready(function () {
$("#locales").change(function () {
var selectedOption = $('#locales').val();
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
if (selectedOption !== '') {
var newUrl;
if (urlParams.has('lang')) {
var reExp = /lang=\w+/;
newUrl = queryString.replace(reExp, "lang=" + selectedOption);
} else {
if (queryString.includes('?')) {
newUrl = queryString.concat("&lang=" + selectedOption);
} else {
newUrl = queryString.concat("?lang=" + selectedOption);
}
}
window.location.replace(newUrl);
}
});
});
Please use th:src like this:
<script th:src="#{/js/langSelect.js}"></script>
Assuming you have your file inside the js folder, which is in your static folder - because the static folder is assumed to be the root path.
If you have your file directly under the static folder, try this:
<script th:src="#{langSelect.js}"></script>
Also, note that you don`t have to import your script on the exact place it is needed.
Your script will run automatically, when your page has completed loading - so it basically does not matter where you put it, but usually before the closing body tag is considered a good practice (so there together with the other scripts).
I'm trying to use a datepicker and a time picker in my html form. My code is below :
<div class="form-group" style="width: 50%;">
<label>Date:</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="datepicker" name="date" >
</div>
<!-- /.input group -->
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<label>
And I use the inclusions below:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.css">
<script type="text/javascript" src="plugins/datepicker/locales/bootstrap-datepicker.fr.js"></script>
<script type="text/javascript" src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
The html is working fine, I can see the datepicker field but I can't use it, the timepicker seems to got the same problem.
When I click on it, the calendar or the timepicker are not opening.
What is wrong?
where is your javascript to initialize fields and convert to datepickers? if you only do html markup, fields know nothing about functionality.
use this:
$('#datepicker').datepicker();
but first! read the docs...
By using jquery clone() i am repeating div section of my document. This div also contains bootstrap datepicker. But, cloned div's datepicker won't work. I am using this datepicker https://eonasdan.github.io/bootstrap-datetimepicker/
Note: In code snippet add multiple files in choose file option then only you will see extra datepicker's.
/* Depending on number of documents description box and datepicker will repeat */
$("#docsUpload").change(function() {
$("#multiShow").empty(); // removes child elements
var ele = document.getElementById($(this).attr('id'));
var result = ele.files;
var ff = result[0];
$("#ff").html("<strong> File Name : </strong>"+ ff.name);
for(var x = 0;x< result.length-1;x++){
var fle = result[x+1];
$('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>");
$('#multiShow').append(" <strong> File Name : </strong>"+fle.name);
$('#multiShow').append("</div><div class='col-sm-3'></div></div>");
$("#selectAll").clone(true).prop({ id:'thisisid_'+x}).appendTo('#multiShow');
}
});
/* depending on selection box type of date changes */
$(document).ready(function(){
$(".static").show(); // always display on page load
$(".period").on('change',function(changeEvent){ //selection box value changed
// var realId = $(".period").closest("div[id]").attr("id"); //get id
var realId = $(changeEvent.target).closest("div[id]").attr("id");
$('#'+realId+' .dateSelector').hide();
//alert('#'+realId+' '+'.dateSelector'); // display id only show 'selectAll'
var operation = '.'+this.value;
$('#'+realId+' '+operation).show();
}); // on period change
}); // document ready state
/* Format of datepicker */
$(document).ready(function(){
$('.datetimepicker1').datetimepicker({
format : "DD/MM/YYYY"
});
$('.datetimepicker2').datetimepicker({
format : "MM/YYYY"
});
$('.datetimepicker3').datetimepicker({
format : 'YYYY'
});
$('.datetimepicker5').datetimepicker({
format : 'YYYY'
});
$('.datetimepicker7').datetimepicker({
format : 'YYYY'
});
$('.datetimepicker9').datetimepicker({
format : "DD/MM/YYYY"
});
$('.datetimepicker10').datetimepicker({
format : "DD/MM/YYYY"
});
});
.dateSelector{
display: none;
}
h1{
color:#2F4F4F;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<div class="container-fluid">
<form name="dataSubmit" action="<?php echo base_url('client/store'); ?>"
method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
<hr/>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<label for="upload">Upload Files : </label>
<input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<span id="ff"></span>
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div id="selectAll">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="upload"> Select Type & Date of document below: </label>
</div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-2">
<div class="form-group">
<select name="period" class="period">
<option value="static" selected="selected">Static</option>
<option value="monthly">Monthly</option>
<option value="quaterly">Quaterly</option>
<option value="semester">Semester</option>
<option value="yearly">Yearly</option>
<option value="other">Other</option>
</select>
</div>
</div>
<!-- begin : datepicker -->
<div class="col-sm-4 dateSelector static">
<div class="input-group date datetimepicker1">
<input type="text" name="staticDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="col-sm-4 dateSelector monthly">
<div class="input-group date datetimepicker2">
<input type="text" name="monthlyDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="dateSelector quaterly">
<div class="col-sm-2">
<select name="periodQuater[]">
<option value="first">January - March</option>
<option value="second">April - June</option>
<option value="third">July - September</option>
<option value="fourth">October - December</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker3">
<input type="text" name="quaterlyDate" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector semester">
<div class="col-sm-2">
<select name="periodSemester[]">
<option value="semfirst">April - September </option>
<option value="semsecond">October - March</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker5">
<input type="text" name="semesterDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector yearly">
<div class="col-sm-2">
<div class="input-group date datetimepicker7">
<input type="text" name="yearDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector other">
<div class="col-sm-2">
<div class="input-group date datetimepicker9">
<input type="text" name="otherDateF[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div> <br/></div>
<div class="col-sm-2">
<div class="input-group date datetimepicker10">
<input type="text" name="otherDateS[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div></div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row for selector-->
</div> <!-- #selectAll -->
<div id="multiShow"> </div>
<!-- end : datepicker -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6 form-group">
<br/>
<button type="submit" class="btn btn-primary form-control"> Submit </button>
</div>
<div class="col-sm-3"></div>
</div>
</form>
</div> <!-- .container -->
After cloning date picker to DOM you must have to do following things to bind date-picker to the newly created elements i recommend to apply same class to all datepicker inputs and than do same as follow to bind datepicker.
You can also read this documentation for more information
$('.datepicker').datepicker('update');
$("#docsUpload").change(function() {
debugger;
$("#multiShow").empty(); // removes child elements
var ele = document.getElementById($(this).attr('id'));
var result = ele.files;
var ff = result[0];
$("#ff").html("<strong> File Name : </strong>"+ ff.name);
for(var x = 0;x< result.length-1;x++){
var fle = result[x+1];
$('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>");
$('#multiShow').append(" <strong> File Name : </strong>"+fle.name);
$('#multiShow').append("</div><div class='col-sm-3'></div></div>");
$("#selectAll").clone().prop({ id:'thisisid_'+x}).appendTo('#multiShow');
}
$('.dpstatic').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpmonthly').datetimepicker({
format : "MM/YYYY"
});
$('.dpquaterly').datetimepicker({
format : 'YYYY'
});
$('.dpsemester').datetimepicker({
format : 'YYYY'
});
$('.dpyearly').datetimepicker({
format : 'YYYY'
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
});
/* depending on selection box type of date changes */
$(document).ready(function(){
$(".static").show(); // always display on page load
$("body").on('change','.period',function(changeEvent){ //selection box value changed
// var realId = $(".period").closest("div[id]").attr("id"); //get id
var realId = $(changeEvent.target).closest("div[id]").attr("id");
$('#'+realId+' .dateSelector').hide();
//alert('#'+realId+' '+'.dateSelector'); // display id only show 'selectAll'
var operation = '.'+this.value;
$('#'+realId+' '+operation).show();
}); // on period change
}); // document ready state
$(document).ready(function(){
$('.dpstatic').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpmonthly').datetimepicker({
format : "MM/YYYY"
});
$('.dpquaterly').datetimepicker({
format : 'YYYY'
});
$('.dpsemester').datetimepicker({
format : 'YYYY'
});
$('.dpyearly').datetimepicker({
format : 'YYYY'
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
$('.dpother').datetimepicker({
format : "DD/MM/YYYY"
});
});
.dateSelector{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<div class="container-fluid">
<form name="dataSubmit" action="<?php echo base_url('client/store'); ?>"
method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
<hr/>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<label for="upload">Upload Files : </label>
<input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<span id="ff"></span>
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div id="selectAll">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group has-feedback">
<input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" />
</div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="upload"> Select Type & Date of document below: </label>
</div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-2">
<div class="form-group">
<select name="period" class="period">
<option value="static" selected="selected">Static</option>
<option value="monthly">Monthly</option>
<option value="quaterly">Quaterly</option>
<option value="semester">Semester</option>
<option value="yearly">Yearly</option>
<option value="other">Other</option>
</select>
</div>
</div>
<!-- begin : datepicker -->
<div class="col-sm-4 dateSelector static">
<div class="input-group date datetimepicker dpstatic">
<input type="text" name="staticDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="col-sm-4 dateSelector monthly">
<div class="input-group date datetimepicker dpmonthly">
<input type="text" name="monthlyDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<div class="dateSelector quaterly">
<div class="col-sm-2">
<select name="periodQuater[]">
<option value="first">January - March</option>
<option value="second">April - June</option>
<option value="third">July - September</option>
<option value="fourth">October - December</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker dpquaterly">
<input type="text" name="quaterlyDate" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector semester">
<div class="col-sm-2">
<select name="periodSemester[]">
<option value="semfirst">April - September </option>
<option value="semsecond">October - March</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker dpsemester">
<input type="text" name="semesterDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector yearly">
<div class="col-sm-2">
<div class="input-group date datetimepicker dpyearly">
<input type="text" name="yearDate[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>
<div class="dateSelector other">
<div class="col-sm-2">
<div class="input-group date datetimepicker dpother">
<input type="text" name="otherDateF[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div> <br/></div>
<div class="col-sm-2">
<div class="input-group date datetimepicker dpother">
<input type="text" name="otherDateS[]" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div></div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row for selector-->
</div> <!-- #selectAll -->
<div id="multiShow"> </div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6 form-group">
<br/>
<button type="submit" class="btn btn-primary form-control"> Submit </button>
</div>
<div class="col-sm-3"></div>
</div>
</form>
</div> <!-- .container -->
Run the snippet to check what changes i have made compare to original code.
Changes I have made:
(1) As point out by Curiousdev
remove true from clone()
in period repeat all the date formats
(2) This is very important,
Add unique class element to each calendar types. Checkout JSFiddle and search for dpstatic , dpmonthly, dpquaterly, dpsemester, dpyearly, dpother. Without adding this elements calendar will not show respective date formats and some time even calendar wont appear.
For fiddle : https://jsfiddle.net/rv285q8x/
Thank you #Curiousdev and #Ataur Rahman Munna for valuable information and help.
you should simply copy and paste my code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">
I am trying to set date and time picker using the moment js for bootstrap.
First I have set this.
<div class="form-group">
<div class="col-md-3 col-sm-3 col-xs-3">
<input id="begindateTime" class="form-control has-feedback-left" placeholder="Begin Date Time" type="text" >
</div>
</div>
Next I have ensure this.
<!-- daterangepicker -->
<script type="text/javascript" src="js/moment/moment.min.js"></script>
<script type="text/javascript" src="js/datepicker/daterangepicker.js"></script>
Next I have set this
<script>
$('#begindateTime').datepicker();
</script>
The issue its showing datetimepicker is not a function? I need a both date and time with the hour and minute selection. What could be I am missing?
CDN :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"></script>
HTML :
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<h6>datetimepicker2</h6>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
JavaScript :
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
Use This Code..
This will useful for you..