Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type='text/javascript' src='http://scc.wpalchemists-dev.com/wp-content/plugins/employee-schedule-manager/js/jquery.datetimepicker.js?ver=4.2.2'></script>
 
  <link rel='stylesheet' id='wpalchemy-metabox-css'  href='http://scc.wpalchemists-dev.com/wp-content/plugins/employee-schedule-manager/css/meta.css?ver=4.2.2' type='text/css' media='all' />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
 <label for="unavailable">Unavailable</label>
  
                                                
                                                    <div class="repeating">
                                <p class="third" style="display: inline-block;">
                                    <label>Day</label><br />
                                    <select name="unavailable[1][day]" id="unavailable[1][day]">
                                        <option value=""></option>
                                        <option value="sunday" >Sunday</option>
                                        <option value="monday" >Monday</option>
                                        <option value="tuesday"  selected='selected'>Tuesday</option>
                                        <option value="wednesday" >Wednesday</option>
                                        <option value="thursday" >Thursday</option>
                                        <option value="friday" >Friday</option>
                                        <option value="saturday" >Saturday</option>
                                    </select>
                                </p>
                                <p class="third" style="display: inline-block;">
                                    <label>From</label><br />
                                    <input type="text" name="unavailable[1][start]" id="unavailable[1][start]" class="starttime" value="09:00" class="short-text" />
                                </p>
                                <p class="third" style="display: inline-block;">
                                    <label>To</label><br />
                                    <input type="text" name="unavailable[1][end]" id="unavailable[1][end]" class="endtime" value="16:00" class="short-text" />
                                </p>
                                <a href="#" class="remove">Remove</a>
                            </div>
                                                    
                                                    <div class="repeating">
                                <p class="third" style="display: inline-block;">
                                    <label>Day</label><br />
                                    <select name="unavailable[3][day]" id="unavailable[3][day]">
                                        <option value=""></option>
                                        <option value="sunday" >Sunday</option>
                                        <option value="monday" >Monday</option>
                                        <option value="tuesday" >Tuesday</option>
                                        <option value="wednesday" >Wednesday</option>
                                        <option value="thursday"  selected='selected'>Thursday</option>
                                        <option value="friday" >Friday</option>
                                        <option value="saturday" >Saturday</option>
                                    </select>
                                </p>
                                <p class="third" style="display: inline-block;">
                                    <label>From</label><br />
                                    <input type="text" name="unavailable[3][start]" id="unavailable[3][start]" class="starttime" value="09:00" class="short-text" />
                                </p>
                                <p class="third" style="display: inline-block;">
                                    <label>To</label><br />
                                    <input type="text" name="unavailable[3][end]" id="unavailable[3][end]" class="endtime" value="16:00" class="short-text" />
                                </p>
                                <a href="#" class="remove">Remove</a>
                            </div>
                                            <p><a href="#" class="repeat">Add Another</a></p>
                    <span class="description" style="display:block;clear:both">Enter the days and times when employee is regularly unavailable.</span>
                </td>
            </tr>
            </table>
            <script type="text/javascript">
            // Add a new repeating section
            var attrs = ['for', 'id', 'name'];
            function resetAttributeNames(section) { 
                var tags = section.find('input, label, select'), idx = section.index();
                tags.each(function() {
                  var $this = jQuery(this);
                  jQuery.each(attrs, function(i, attr) {
                    var attr_val = $this.attr(attr);
                    if (attr_val) {
                        $this.attr(attr, attr_val.replace(/unavailable\[\d+\]\[/, 'unavailable\['+(idx + 1)+'\]\['))
                    }
                  })
                })
            }
                               
            jQuery('.repeat').click(function(e){
                    e.preventDefault();
                    var lastRepeatingGroup = jQuery('.repeating').last();
                    var cloned = lastRepeatingGroup.clone(true)  
                    cloned.insertAfter(lastRepeatingGroup);
                    cloned.find("input").val("");
                    cloned.find("select").val("");
                    resetAttributeNames(cloned);
                });
​
            jQuery('.starttime').click(function(){
              jQuery(this).datetimepicker('show'); 
            });
​
​
            jQuery('.remove').click(function(e){ //user click on remove text
                    e.preventDefault(); 
                    jQuery(this).parent('div').remove();
                });
​
            </script>
​
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers