i am trying to get the Bootstrap Datepicker to work on my website but the button seems to be disabled and doesn't do anything when i click on it or the input form box here is my test code I am not sure what i am doing wrong here. i am using bootstrap 3.3.5
<!DOCTYPE html><html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
</head>
<body>
<center>
<h1>BootStrap Datepicker</h1>
<form>
<div class="form-group">
<div class="input-group date" id='datepicker'>
<input type="text" class="form-control" placeholder="Birthdate yyyy/mm/dd">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</form>
</center>
</body>
</html>
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<legend>Bootstrap-datepicker set date sample</legend>
<div class="form-group">
<label for="exampleInputDate">Some special date</label>
<input type="text" class="form-control" id="exampleInputDate">
</div>
</fieldset>
</div>
</div>
</div>
here is the javascript file
var firstDayOfMonth = function() {
// your special logic...
return 5;
};
var d = new Date();
var currMonth = d.getMonth();
var currYear = d.getFullYear();
var startDate = new Date(currYear,currMonth,firstDayOfMonth());
$('#exampleInputDate').datepicker('setDate',startDate);
This should work perfectly
here is the plunker
Related
I have a Bootstrap datetimepicker component in my code that was working a few weeks ago but has stopped working. I appreciate any help getting to start working again.
Find below my HTML code:
<script src="https://cdn.jsdelivr.net/npm/web3#latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis#latest/dist/moralis.js"></script>
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="js/jquery.easing.1.3.js+jquery.waypoints.min.js+jquery.stellar.min.js+owl.carousel.min.js.pagespeed.jc.AgoWNHbz_d.js"></script></script>
<script src="js/jquery.toolbar.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js+popper.min.js+bootstrap.min.js.pagespeed.jc.ln39gZSjGk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/6-beta4/js/tempus-dominus.min.js"></script>
<form action="" method="post" class="datepickers">
<div class="form-group">
<div class="input-group date" id="id_0">
<input type="text" value="10/01/2019 05:32:00 PM" class="form-control" required />
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".datepickers").click(function(){
$("#id_0").datetimepicker();
alert("MammazZ!");
});
});
</script>
</div>
</div>
When I click within the datepickers input field as illustrated below:
The MammazZ alert is fired, followed by
a slight change (the seconds are omitted) as illustrated below:
Please help me resolve this!
I think the problem is due to an incompatibility in imports and the sequence of imports. In case you want to use bootstrap 5, things get more easy
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="container">
<h2 class="py-2">Datepicker in Bootstrap 5</h2>
<form class="row">
<label for="date" class="col-1 col-form-label">Date</label>
<div class="col-5">
<input id="date" class="form-control" type="date"/>
</div>
</form>
</section>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
i am using jquery datetime picker
my problem is when i select the time and use tab button it will change to minus 1 hours
means if i select 9.30 am and click on tab button it will be 8.30 am and it will countinuely do minus when ever i use tab on that controll
here you can see that i have select 9.30 AM but when focus out on this control it will automatically do 8.30 AM
here is a code
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places Searchbox</title>
<link href="~/Content/jquery.datetimepicker.css" rel="stylesheet" />
<script src="~/scripts/jquery.min.js"></script>
<script src="~/scripts/moment.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
<script src="~/scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/scripts/jquery.datetimepicker.full.min.js"></script>
<script src="~/scripts/VagaroDateTimePicker.js"></script>
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<input type="text" class="datepicker" />
</div>
</div>
</div>
$('.datepicker').datetimepicker({
format: 'M-d-Y g:i A',
});
i got the solution for this
$('.datepicker').datetimepicker({
// datepicker: false,//hide date
// format: 'DD-M-YYYY hh:mm A'
format: 'M-d-Y g:i A',
formatTime: 'g:i A',
validateOnBlur: false,
});
i have added validateOnBlur:false and its work for me
I test your code and i saw the problem that when you press tab if you choose 10.00 AM its became 09.00 AM and i checked the documentation and i figure out that you can combine moment.js as its written in the documentation
All you have to do to just add moment.js and then add this line to your codes
$('.datepicker').datetimepicker({
format:'DD.MM.YYYY h:mm a',
formatTime:'h:mm a',
formatDate:'DD.MM.YYYY'
});
$.datetimepicker.setDateFormatter('moment');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 mb-5">
<input type="text" class="datepicker"/>
</div>
<div class="col-md-6 mb-5">
<input type="text" class="datepicker" />
</div>
<div class="col-md-6 mb-5">
<input type="text" class="datepicker" />
</div>
</div>
</div>
and i already made for you here please check it out and tell me if its helps
Fiddle: https://jsfiddle.net/v82vkxpz/7/
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Solicitud De Vacaciones</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso
form{
font-family: Arial, Helvetica, sans-serif; color: black
}
.bootstrap-iso form button, .bootstrap-iso form button:hover{
color: white !important;
}
.asteriskField{
color: red;
}
</style>
</head>
<body>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-2 col-xs-12">
<form action="MovimientoBancario" class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Desde
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="from" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Hasta
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="to" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="_honey" style="display:none" type="text"/>
<button class="btn btn-primary " name="submit" type="submit">
Buscar
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script>
$(document).ready(function(){
var date_input=$('input[id="date"]');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'yyyy-mm-dd',
container: container,
todayHighlight: true,
autoclose: true,
})
})
</script>
</body>
Here's my code, I've searched all over stackoverflow but none of the solutions I find works for me, I need to do two things.
date two has to be bigger than date one
date one has to give you the option to start from the current date.
I've tried these
Jquery datepicker restrict dates in second date field based on selected date in first date field
https://jqueryui.com/datepicker/#min-max
You can use startDate for restrict to start from current date.
Try below code I hope it will resolve your problem.
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Solicitud De Vacaciones</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.bootstrap-iso .formden_header h2,
.bootstrap-iso .formden_header p,
.bootstrap-iso form {
font-family: Arial, Helvetica, sans-serif;
color: black
}
.bootstrap-iso form button,
.bootstrap-iso form button:hover {
color: white !important;
}
.asteriskField {
color: red;
}
</style>
</head>
<body>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-2 col-xs-12">
<form action="MovimientoBancario" class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Desde
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" class="from_date" id="dpd1" name="from" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Hasta
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="dpd2" name="to" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="_honey" style="display:none" type="text" />
<button class="btn btn-primary " name="submit" type="submit">
Buscar
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<script>
$(document).ready(function() {
var date_input = $('input[id="date"]');
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var currDate = new Date();
var date = new Date();
date.setDate(date.getDate());
$('#dpd1').datepicker({
format: 'yyyy-mm-dd',
startDate: date,
container: container,
todayHighlight: true,
autoclose: true,
})
$('#dpd1').datepicker().on('changeDate', function() {
$('#dpd2').val('')
})
$('#dpd2')
.datepicker()
.on('show', function(ev) {
var toDate = $('#dpd1').datepicker("getDate");
toDate.setDate(toDate.getDate() + 1);
$('#dpd2').datepicker("setStartDate", toDate);
})
.on('changeDate', function(ev) {
var date1 = $('#dpd1').datepicker("getDate").valueOf();
var date11 = $('#dpd1').datepicker("getDate");
date11.setDate(date11.getDate() + 1);
var date2 = ev.date.valueOf();
if (date2 <= date1) {
alert("Second date bigger than first!");
$('#dpd2').datepicker("setDate", date11);
}
});
})
</script>
</body>
DEMO
I noticed you have used same id on both textboxes with different name attributes. It is good practice to use different ids for all controls.
Regardless of that, here's the change you need to make in your jquery
$(document).ready(function() {
var date_input = $('input[name="from"]');
var date1_input = $('input[name="to"]');
var container =
$(".bootstrap-iso form").length > 0
? $(".bootstrap-iso form").parent()
: "body";
date_input
.datepicker({
format: "yyyy-mm-dd",
container: container,
todayHighlight: true,
autoclose: true,
startDate: new Date()
})
.on("changeDate", function(e) {
var desdeDate = e.date;
desdeDate.setDate(desdeDate.getDate() + 1);
date1_input.datepicker({
format: "yyyy-mm-dd",
autoclose: true
});
date1_input.datepicker("setStartDate", desdeDate);
date1_input.focus();
});
});
Note that I used name attributes to select the textboxes and changeDate event is to calculate the new start date value for the second textbox which is then initialized with setStartDate method of the datepicker plugin.
You can find many other options to tweak at their website.
I have the code to add a date picker. Working fine. but when I try adding more than one pickers (div). Only the first picker works, Can anyone explain me what is wrong. I need to add sixteen datepickers (inputs) in my timetable.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy hh:mm',
language: 'en',
pick12HourFormat: true // enables the 12-hour format time picker
});
</script>
</body>
<html>
Replace id by class, because id should be unique in same document :
$('#datetimepicker').datetimepicker({
Should be :
$('.date').datetimepicker({
Hope this helps.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$('.date').datetimepicker({
format: 'dd/MM/yyyy hh:mm',
language: 'en',
pick12HourFormat: true // enables the 12-hour format time picker
});
</script>
</body>
<html>
I have a problem with the bootstrap datetime picker. I don't think the JavaScript get's loaded when the page is running. Here is the script that i try to run.
<script type="text/javascript">
$(function () {
$('#inputNewPublicationDate').datetimepicker({
locale: 'dk'
});
});
</script>
and here is the textbox/input box that I want the date picker to be related to.
<div class="form-group">
<div class='input-group date' id='inputNewPublicationDate'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
I am using a masterpage if that is relevant for this problem. Can some one explained to me what I am doing wrong? Here is the generated HTML.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
Euro Poultry
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /><link href="Content/bootstrap.css" rel="stylesheet" /><link href="Content/hover.css" rel="stylesheet" /><link href="Content/MenuCss.css" rel="stylesheet" /><link href="Content/MyCss.css" rel="stylesheet" /><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /><link href="Content/bootstrap-datetimepicker.min.css" rel="stylesheet" /><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../Scripts/moment.min.js"></script>
<script src="../Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="../Scripts/da.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" /></head>
<body>
<form method="post" action="NewProduct" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="TohYngYAQpCAII8RpuQnEalPl/MTArnSEh+ZpM9u8IM0qp+pydvAXRs1biEQdGMzypAlutTdOoQBFlApZ5P0jplQl6tY3em/XaDxCPoZLIUpPnQP/EJu8oNhT1EGKGTU/mY5b/S/GvhXA3nzCXGnQ37DOu9qDZwMxP3xDCwjFxTwNQux/jF9ZH/K24q0Fmgo7cpJALpuVCgmiBZ8nxTPpA==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax-framework på klientsiden blev ikke indlæst.');
//]]>
</script>
<script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-PDU01" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="E6B80599" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="ziT0MWsXfU8bZf+HxgsyZxmvTOEWqLQAAVF2jCik7SvdOA/hstIfA8BYa8FfUczfqC2x1DvTsx1lx8eC0mAvo2idOZKBotnAxZyCCfL95qaIB3oeDzaq8WPooYr8Erpv" />
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl16', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>
<div class="MenuBody">
<a href="Overview.aspx">
<div class="MenuBrand">
<p>EP</p>
</div>
</a>
<a href="AllProducts.aspx">
<div class="MenuBtn hvr-underline-from-left">
<p>Produkter</p>
</div>
</a>
<a href="NewProduct.aspx">
<div class="MenuBtn hvr-underline-from-left">
<p>Nyt Produkt</p>
</div>
</a>
</div>
<div class="menuUnderLine">
</div>
<div class="Content fullscreen">
<div class="newProductWrapper">
<div class="myRow">
<div class="mediumCol">
<div class="myRow">
<div class="mediumCol title">
<span id="MainContent_lblNewGtin">GTIN - Global Trade Item Number</span>
</div>
</div>
<div class="myRow">
<div class="mediumCol">
<input name="ctl00$MainContent$txtNewGtin" type="text" id="MainContent_txtNewGtin" class="form-control" />
</div>
</div>
</div>
<div class="mediumCol">
<div class="myRow">
<div class="mediumCol title">
<span id="MainContent_lblNewTargetMarket">Landekode for Target Market</span>
</div>
<div class="mediumCol">
<select name="ctl00$MainContent$ddNewTargetMarket" id="MainContent_ddNewTargetMarket" class="form-control">
</select>
</div>
</div>
</div>
</div>
<div class="myRow">
<div class="smallCol">
<div class="myRow">
<div class="smallCol title">
<span id="MainContent_Label1">Start gyldighedsdato</span>
</div>
<div class="smallCol">
<div class="form-group">
<div class='input-group date' id='inputNewEffectiveDate'>
<input id="txtNewEffectiveDate" type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="smallCol">
<div class="myRow">
<div class="smallCol title">
<span id="MainContent_lblNewPublicationDate">Publikationsdato</span>
</div>
<div class="smallCol">
<div class="form-group">
<div class='input-group date' id='inputNewPublicationDate'>
<input id="txtNewPublicationDate" data-format="dd/MM/yyyy" type='text' class="form-control" />
<span class="input-group-addon" style="z-index: 200;">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#txtNewEffectiveDate').datetimepicker({
locale: 'da'
});
});
</script>
<script type="text/javascript">
$(function () {
$('#inputNewPublicationDate').datetimepicker({
locale: 'da'
});
});
</script>
</div>
</form>
</body>
</html>